Izvorni kod stranice online. Google Chrome - alati za webmastere

06.09.2019 Zanimljivo

Ctrl+U

Kako mogu vidjeti izvorni kod elementa?

Desni klik na element stranice od interesa.

Google chrome: “Prikaži kod elementa”

Opera: "Istraži element"

Firefox: “Analiziraj element”

U drugim pretraživačima potražite stavku menija sa sličnim značenjem.

Zdravo svima!

Posebno sam iznio cijelu poentu na početku članka, za one koji traže brzi odgovor.

Informacije su možda poznate mnogima, ali pošto pišem za blogere početnike, web programere i druge istraživače, ovaj referentni članak je neophodan.

U budućnosti ćete svakako proučavati izvorni kod stranica i pojedinačnih elemenata.

Pogledajmo konkretan primjer kako možete koristiti pregled izvornog koda stranice.

Na primjer, želimo vidjeti koje se ključne riječi koriste za određenu stranicu. Idemo na web stranicu koja nas zanima i pritisnemo Ctrl+U. Izvorni kod ove stranice će se otvoriti u posebnom prozoru ili na posebnoj kartici. Pritisnite Ctrl+F da potražite isječak koda. U ovom slučaju upisujemo riječ “ ključne riječi". Automatski ćete biti preusmjereni na dio koda s ovom meta oznakom i tražena riječ će biti istaknuta.

Po analogiji, možete pretraživati i proučavati druge fragmente koda.

Pregledanje cjelokupnog izvornog koda stranice u većini slučajeva nije baš zgodno, pa je u svim pretraživačima moguće vidjeti kod pojedinačnog elementa ili fragmenta.

Upotrijebimo konkretan primjer gledanja koda elementa. Na primjer, da vidimo da li veza ima atribut nofollow. Kliknite desnim tasterom miša na link koji nas zanima i u padajućem kontekstnom meniju kliknite levim tasterom miša na stavku “Prikaži kod elementa” ili slično (u zavisnosti od vašeg pretraživača). U nastavku, u posebnom prozoru za analizu koda, dobijamo nešto slično.

Vidimo da kod veze sadrži rel=”nofollow” . To znači da PR neće “procuriti” preko ovog linka. O tome ćemo detaljnije govoriti u sljedećim člancima. Sada je važno da sada znate kako vidjeti izvorni kod stranice i izvorni kod pojedinačnog elementa.

" Ista stavka se nalazi iu kontekstualnom meniju koji, ako kliknete desnim tasterom miša na tekst stranice. Možete koristiti i prečicu na tastaturi CTRL + U. Mozilla FireFox ne koristi eksterne programe - original kod stranice sa isticanjem sintakse će se otvoriti u posebnom prozoru pretraživača.

U Internet Exploreru kliknite na meni Datoteka i izaberite Uredi u Notepadu. Umjesto imena Notepad može biti napisano drugo ime, dodijelili ste ga u postavkama pretraživača da vidite original kod A. Na klik stranice desnim tasterom miša se pojavljuje kontekstni meni, koji takođe ima stavku koja vam omogućava da otvorite izvor kod stranice u eksternom programu - “Prikaži HTML- kod A".

U pretraživaču Opera otvorite meni, idite na odjeljak "Stranica" i imat ćete priliku odabrati "Izvor" u pododjeljku "Alati za razvoj" kod"ili stavku "Original kod okvir." Ovim selekcijama se dodeljuju prečice CTRL + U i CTRL + SHIFT + U, respektivno. U kontekstualnom meniju vezanom za klik stranice desnim klikom, postoji i stavka „Inicijal kod" Opera izvor stranice u eksternom programu koji je dodijeljen u OS-u ili u postavkama pretraživača za uređivanje HTML datoteka.

Google Chrome pretraživač bez ikakve sumnje ima najbolju organizaciju za gledanje originala kod A. Desnim klikom miša možete odabrati View kod A stranice"i tada će se izvorni kod sa isticanjem sintakse otvoriti u posebnoj kartici. Ili možete odabrati liniju “Prikaz” u istom meniju kod element” i na istoj kartici će se otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS kod element stranice. Pretraživač će reagovati na kretanje kursora kroz redove kod i, isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a kod A.

Vještina promijenite izvorni kod stranice– korisna vještina za naprednog korisnika interneta. Zamjenom HTML koda možete promijeniti otvorenu web stranicu po želji. U ovom članku ćemo vam reći kako promijeniti kod stranice u Google Chromeu. Međutim, u drugim pretraživačima sve se radi slično, tako da ne bi trebalo biti nikakvih poteškoća.

Šta je HTML kod stranice?

Svaka stranica koju otvorite u svom pretraživaču ima svoj kod u HTML jeziku za označavanje. Ovaj kod predstavlja oznake i tekst. Oznake su jedinstvene oznake koje govore pretraživaču kako da prikaže ovaj ili onaj dio stranice. Tekst je sadržaj stranice, ono što korisnik vidi. Takođe, na stranicu se mogu povezati CSS stilovi koji definišu izgled elemenata stranice. To promijenite izvorni kod stranice ne morate temeljito poznavati HTML i CSS, a uskoro ćete se i sami uvjeriti.

Zašto mijenjati web stranicu?

Možete promijeniti podatke na stranici, promijeniti tekst poruke ili napraviti lažni snimak ekrana. Imajte na umu da su sve promjene vidljive samo vama i da će nestati kada ponovo učitate stranicu. Također izmijenjeni podaci neće biti stvarni. Na primjer, ako nemam 10 dolara, a promijenim ih na 100, onda neću imati više novca. Ovo je samo prikaz stranice od strane pretraživača. primjer:

nakon:

Na primjer, uzet ću istu stranicu i promijeniti prethodnu najavu članka „Otvaranje glavne stranice u Google Chrome-u. Desnom tipkom miša kliknem na element koji želim promijeniti, na primjer, naslov najave i izaberem “Prikaži kod”.

U prozoru koji se otvori idite na karticu Elementi i pogledajte HTML kod stranice. U njemu treba da pronađemo tekst koji nas zanima. (podvučeno crvenom bojom)

Sada ću izbrisati stari tekst i napisati novi.

To je sve, naslov oglasa je promijenjen. Sada ću promijeniti samu najavu, oznake i kategoriju.

Možete umetnuti drugu sliku promjenom src atributa u oznaci img.

Vjerovatnoća gledanja u početni kod web stranice, koji pretraživač prima kao rezultat zahtjeva serveru, dostupan je u gotovo svakom Internet pretraživaču. Pristup odgovarajućoj komandi organizovan je približno identično, ali postoje značajne razlike u načinu i obliku u kojem se početna kod .

Instrukcije

1. U pretraživaču Mozilla FireFox proširite odjeljak "Prikaz" u meniju i kliknite na "Inicijalno" kod stranice" Ista stavka se nalazi iu kontekstualnom meniju koji se pojavljuje ako kliknete desnim tasterom miša na tekst stranice. Možete koristiti i kombinaciju tipki CTRL + U. Mozilla FireFox ne koristi eksterne programe - početni kod stranice sa isticanjem sintakse će se otvoriti u posebnom prozoru pretraživača.

2. U Internet Exploreru kliknite na meni Datoteka i izaberite Uredi u Notepadu. Umjesto naziva Notepad može se napisati drugi program koji ste u postavkama pretraživača dodijelili za pregled početnih kod A. Na klik stranice desnim tasterom miša pojavljuje se kontekstni meni koji takođe ima stavku koja vam omogućava da otvorite početni kod stranice u eksternom programu – „Prikaži HTML- kod A".

3. U pretraživaču Opera otvorite meni, idite na odjeljak „Stranica“ i imat ćete priliku odabrati stavku „Start“ u pododjeljku „Alati za razvoj“ kod"ili stavku "Inicijal kod okvir." Prečice CTRL + U i CTRL + SHIFT + U dodijeljene su ovom odabiru, respektivno. U kontekstualnom meniju vezanom za klik stranice desnim klikom, postoji i stavka „Inicijal kod" Opera otvara izvorni kod stranice u eksternom programu koji je dodijeljen u OS-u ili u postavkama pretraživača za uređivanje HTML datoteka.

4. Google Chrome pretraživač bez ikakve sumnje ima najbolju organizaciju za pregled inicijalnog kod A. Desnim klikom na stranicu, možete odabrati prikaz kod A stranice"i tada će se izvorni kod sa isticanjem sintakse otvoriti u posebnoj kartici. Ili vam se više sviđa linija „Prikaz“ u istom meniju kod element” i pretraživač na istoj kartici će otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS kod svaki element stranice. Pretraživač će reagovati na kretanje kursora kroz redove kod i, isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a kod A.

5. U Apple Safari pretraživaču proširite odjeljak Pogled i odaberite Prikaži HTML kod A". U meniju koji se pojavljuje kada desnom tipkom miša kliknete otvori stranice, odgovarajuća stavka se zove “Prikaži izvor”. Ovoj radnji se dodeljuju prečice CTRL + ALT + U. Početno kod otvara u posebnom prozoru pretraživača.

Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i fokusu stranice. Primjer 4.1 pokazuje kod za jednostavan dokument koji sadrži osnovne oznake.

Primjer 4.1. Izvorni kod web stranice

Primjer web stranice

Naslov

Prvi paragraf.

Drugi paragraf.

Kopirajte sadržaj ovog primjera i sačuvajte ga u folderu c:\www\ kao example41.html. Nakon toga pokrenite pretraživač i otvorite datoteku kroz stavku menija Datoteka > Otvori datoteku (Ctrl+O). U dijalogu za odabir dokumenta izaberite datoteku example41.html. Web stranica prikazana na slici 1 će se otvoriti u pretraživaču. 4.1.

Rice. 4.1. Rezultat pokretanja primjera

Elementsluži za označavanje vrste tekućeg dokumenta - DTD (definicija tipa dokumenta, opis tipa dokumenta). Ovo je neophodno kako bi pretraživač shvatio kako tumačiti trenutnu web stranicu, jer HTML postoji u nekoliko verzija, osim toga postoji i XHTML (EXtensible HyperText Markup Language) koji je sličan HTML-u, ali se od njega razlikuje po sintaksi. Da se pretraživač "ne zbuni" i shvati po kom standardu da prikaže web stranicu, potrebno je postaviti u prvom redu koda .

Postoji nekoliko tipova, razlikuju se ovisno o verziji HTML-a na koju ciljaju. U tabeli 4.1. Date su glavne vrste dokumenata sa njihovim opisima.

Table 4.1. Važeći DTD

DOCTYPE	Opis
HTML 4.01
	Stroga HTML sintaksa.
	Prijelazna HTML sintaksa.
	HTML dokument koristi okvire.
HTML 5
	Ova verzija HTML-a ima samo jedan tip dokumenta.
XHTML 1.0
	Stroga XHTML sintaksa.
	Prijelazna XHTML sintaksa.
	Dokument je napisan u XHTML-u i sadrži okvire.
XHTML 1.1
	Programeri XHTML 1.1 očekuju da će postepeno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na tipove, jer je sintaksa ista i poštuje jasna pravila.

Razlika između strogog i prelaznog opisa dokumenta je drugačiji pristup pisanju koda dokumenta. Strogi HTML zahtijeva striktno pridržavanje HTML specifikacije i ne oprašta greške. Prijelazni HTML je opušteniji u pogledu nekih nedostataka koda, tako da je ovaj tip poželjniji za korištenje u određenim slučajevima.

Na primjer, u strogom HTML-u i XHTML-u potrebno je prisustvo oznake , au prijelaznom HTML-u može se izostaviti i ne specificirati. U isto vrijeme, sjećamo se da će pretraživač u svakom slučaju prikazati dokument, bez obzira na to odgovara li sintaksi ili ne. Ova provjera se provodi pomoću validatora i namijenjena je prvenstveno programerima da prate greške u dokumentu.</p> <p>U budućnosti ćemo uglavnom koristiti strict<!DOCTYPE>, osim ako nije drugačije navedeno. To će nam omogućiti da izbjegnemo uobičajene greške i naučimo nas pisati sintaktički ispravan kod.</p> <p>Često možete pronaći HTML kod bez korištenja<!DOCTYPE>, web stranica će i dalje biti prikazana u ovom slučaju. Međutim, može se dogoditi da se isti dokument pojavljuje drugačije u pretraživaču kada ga koristite<!DOCTYPE>i bez toga. Osim toga, pretraživači mogu prikazati takve dokumente na svoj način, kao rezultat toga stranica se „sruši“, tj. će biti prikazan potpuno drugačije od onoga što programer zahtijeva. Da biste izbjegli takve situacije, uvijek dodajte<!DOCTYPE>na početak dokumenta.</p><p>Tag <html>definira početak HTML datoteke, zaglavlje je pohranjeno unutar njega ( <head>) i tijelo dokumenta ( <body> ).</p><p>Naslov dokumenta, koji se naziva i blok <head>, može sadržavati tekst i oznake, ali sadržaj ovog odjeljka nije direktno prikazan na stranici, osim u kontejneru <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Tag <meta>je univerzalan i dodaje čitavu klasu mogućnosti, posebno uz pomoć meta tagova, kako se ovaj tag općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga. Da bi pretraživač shvatio da ima posla sa UTF-8 kodiranjem (Unicode transformacioni format), i ovaj red se dodaje.</p><p> <title>Primjer web stranice

Tag određuje naslov web stranice; to je jedan od važnih elemenata dizajniranih za rješavanje mnogih problema. U operativnom sistemu Windows, tekst naslova se prikazuje u gornjem levom uglu prozora pretraživača (slika 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>Rice. 4.2. Prikaz zaglavlja u pretraživaču</p> <p>Tag <title>je obavezan i svakako mora biti prisutan u šifri dokumenta.</p><p>Morate dodati završnu oznaku</head> da označi da je naslovni blok dokumenta završen.</p><p>Tijelo dokumenta <body>namijenjeno postavljanju oznaka i sadržaja web stranice.</p><p> <h1>Naslov</h1> </p><p>HTML nudi šest tekstualnih naslova različitih nivoa koji ukazuju na relativnu važnost odjeljka koji slijedi nakon naslova. Da, oznaka <h1>predstavlja najvažniji naslov prvog nivoa i oznaku <h6>služi za označavanje naslova šestog nivoa i najmanje je značajan. Podrazumevano, naslov prvog nivoa se prikazuje najvećim podebljanim fontom, a naslovi narednih nivoa su manje veličine. Oznake <h1>...<h6>Pogledajte blok elemente, oni uvijek počinju u novom redu, a nakon njih se drugi elementi pojavljuju u sljedećem redu. Dodatno, razmak se dodaje ispred i iza naslova.</p><p>  </p><p>Neki tekst se može sakriti od prikazivanja u pretraživaču tako što ćete ga ostaviti komentarom. Iako ovaj tekst neće vidjeti korisnik, on će se i dalje prenositi u dokumentu, pa ako pogledate izvorni kod, možete otkriti skrivene bilješke.</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">Najbolji članci na ovu temu</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/bs/kak-perenesti-faily-iz-odnoi-papki-v-druguyu-kopirovanie.html"> <div class="img_container"><img src="/uploads/70b68aae0b5e3592fa00311d5971e09b.jpg" border="0" alt="Kopiranje fajlova i foldera" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Kopiranje fajlova i foldera</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/bs/zapusk-programmy-ot-administratora-iz-komandnoi-stroki.html"> <div class="img_container"><img src="/uploads/0fb7619e38c27dfffad85c3744743ded.jpg" border="0" alt="Različiti načini pokretanja komandne linije kao administratora u Windowsu" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Različiti načini pokretanja komandne linije kao administratora u Windowsu</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/bs/komandnaya-stroka-s-pravami-administratora-komanda-runas---zapusk.html"> <div class="img_container"><img src="/uploads/184ffe2243e6dd68c8dfd39573176299.jpg" border="0" alt="RUNAS naredba - pokretanje aplikacije kao drugi Windows korisnik" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">RUNAS naredba - pokretanje aplikacije kao drugi Windows korisnik</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">Kategorije:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/bs/category/programs/">Programi</a></li> <li class=""><a href="https://bumotors.ru/bs/category/safety/">Sigurnost</a></li> <li class=""><a href="https://bumotors.ru/bs/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/bs/category/iron/">Iron</a></li> <li class=""><a href="https://bumotors.ru/bs/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/bs/category/vkontakte/">U kontaktu sa</a></li> <li class=""><a href="https://bumotors.ru/bs/category/errors/">Greške</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/ishodnyi-kod-stranicy-onlain-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/ishodnyi-kod-stranicy-onlain-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%2Fbs%2Fishodnyi-kod-stranicy-onlain-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">© 2023 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.</span> </div> </div> </div> </div> </body> </html>