Svaki korisnik interneta ima svoje omiljene stranice na kojima troši dugo vremena. I samo lijeni nisu pali na pamet pogledati kako je nastao i od čega se sastoji. Nemoguće je odgovoriti na sva ova pitanja, jer postoji mnogo načina za izradu web stranice, ali pogledati naredbe i kodove koji je čine moguće je i javno dostupno svima.
Drugo je pitanje hoće li osoba koja se ne bavi programiranjem razumjeti ijedan od simbola koji čine kod. Ali iz primjera koji će biti navedeni u nastavku, bilo koji Google korisnik Chrome će moći vidjeti pojedinačni elementi stranice.
Kako vidjeti izvorni kod html stranice u Google pregledniku
Kako biste mogli vidjeti kod stranice u Chromeu, trebate otići na web mjesto koje vas zanima i izvršiti sljedeće korake:
Ove dvije stavke razlikuju se po svojoj funkcionalnosti i informacijama za korisnika, programera ili hakera. 
Koja je razlika između koda stranice i samo naredbe "View Code"?
Analizirajući svaku od ovih funkcija, možete napisati zaseban članak. Za programere je ova razlika značajna i oni razumiju u kojim slučajevima je potrebno koristiti “View code”, au kojim “View page code” u pregledniku Google Chrome.
No, objašnjavajući za prosječnog korisnika, te se funkcije mogu podijeliti u sljedeće svrhe:
- “Prikaz koda stranice” potreban je samo da biste vidjeli glavnu kombinaciju stranice. U osnovi, ovo je struktura stranice (bez dodatni modeli u obliku CSS datoteke i ostali dodaci koji su ostali u mapi kreatora stranice). Ova struktura nije pogodan za stvaranje vlastitu stranicu metodom “copy-paste”, ali će vam omogućiti da vidite što je točno programer radio i kojim redoslijedom kako bi stranica u pregledniku Google Chrome imala takav vanjski dizajn.
- “View Code” prikazuje detaljnu strukturu, ističući sva područja na stranici koja su zahvaćena. Ako zadržite pokazivač miša iznad određenog koda popisa, on će istaknuti element na web mjestu kojem pripada.
- Pregled koda stranice otvara se u zasebnom pregledniku bez mogućnosti uređivanja. Odnosno, prikladan je samo za kopiranje i čitanje koda stranice. Ali ovo nije ništa manje korisna funkcija.
- “View code” je promjenjiv i možete urediti bilo koji element na način koji vama odgovara. Naravno, sve ove promjene će "živjeti" dok se stranica ne osvježi, ali ponekad je zabavno proći kroz te postavke i jednostavno razumjeti zašto je ova ili ona vrijednost potrebna i što će se dogoditi ako je promijenite. Ne biste trebali pretpostaviti da ćete takvim radnjama naštetiti sebi ili web-mjestu na bilo koji način - ove promjene utječu samo na kod vašeg Google Chromea i ne idu na mrežu.
Razmatramo pitanje kako vidjeti kod elementa
Ako bismo odgovarali na takvo pitanje, onda je jedina opcija koja se nameće primjer. Jer u jednom članku vrlo je teško postati osoba koja razumije ovu temu (web programer), ali pokazati primjerom tako da se pitanje riješi je puno lakše.
Funkcionalnost koda elementa je vrlo široka, pa uzimamo jednu od riječi na web mjestu Google preglednik Krom. Htjeli smo razmotriti što ključne riječi(u kodu će biti napisano kao "ključne riječi") korištene za našu stranicu. Da bismo to učinili, izvodimo sljedeći algoritam:
Drugi načini korištenja ove značajke u pregledniku Google Chrome
Općenito, nastavljajući odgovoriti na pitanje kako gledati kod elementa i zašto je to potrebno, trebali biste navesti njegove funkcije. Naime, zahvaljujući mogućnosti pregleda koda elementa bilo koje stranice u pregledniku Google Chrome, možemo:
- Pogledajte strukturu stranice počevši od glave ("zaglavlje stranice") i završavajući s krajem (konačna naredba bilo kojeg programa);
- Pregledajte sve funkcije web mjesta, naime: veze na druga mjesta, dodatne module s vanjskih mjesta i prisutnost ugrađenih brojača za prikupljanje raznih informacija;
- Saznajte je li kopiranje sa stranice zabranjeno ili ne;
- Kod će zabilježiti sve poveznice na druge stranice stranice, kao i njihov dizajn i naknadne radnje nakon klika na njih.
Ovo nipošto nije konačan popis. Ali treba podsjetiti da bez posebnog znanja možete "pročitati" kod Google stranice Chrome je gotovo nemoguće i dobiveni podaci prosječnom korisniku praktički nije potreban.
Stavka "Prikaz koda elementa" ne radi
Treba odmah reći da će svaka stranica imati otvoreni pristup na kodove elemenata. Odnosno, čak će i najpopularnija i najskuplja mjesta biti otvorena za pregled njihovog koda. Stoga, ako stavka u pregledniku Google Chrome nije aktivna ili generira pogrešku, postoje sljedeći mogući razlozi:
- Korisnički profil je oštećen;
- Prisutnost zlonamjernog softvera na računalu;
- Blokiranje određenim proširenjem radi povećanja performansi (čak se i to može dogoditi).
Popravak oštećenog korisničkog profila
Za stvaranje novi profil, trebate ukloniti stari s računala. Da bismo to učinili, činimo sljedeće:
- Zatvorite Google Chrome i pokrenite ugrađeni Windows preglednik Istraživač.
- Uđi adresna traka sljedeću naredbu: %LOCALAPPDATA%\Google\Chrome\Korisnički podaci\.
- Kada se direktorij otvori, potražite mapu “Default” i njenom nazivu dodajte “Backup” tako da dobijete sljedeće: “Backup Default”.
- Sada, nakon ponovnog pokretanja preglednika Chrome, stvorit će se novi profil.
Uklanjamo malware ili njegove ostatke
Ako nam novi profil ne daje pristup kodu elementa stranice, a i dalje vidimo pogrešku, trebali bismo učiniti sljedeće:
- Otvorite naredbeni redak Windows niz(“Pokreni”) i tamo unesite naredbu “cmd”.
- Unesite sljedeću naredbu u redak: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
- Nakon potvrde radnje unesite ovo: RD /S /Q “%WinDir%\System32\GroupPolicy”.
- Sada “gpupdate /force” (bez navodnika).
Ako je sve učinjeno ispravno, nakon ponovnog pokretanja Google računalo Chrome će otvoriti kod elemenata i preglednik će raditi normalno.
Morate brzo vidjeti sve promjene na samoj stranici, bez utjecaja na datoteke i kod stranice objavljene na Internetu. Na primjer, promijeniti shema boja bilo koji blok, premjestiti iskliznuti element itd.
Za to mnogi webmasteri koriste lokalne Denwer poslužitelji ili OpenServer, pokrenut puna kopija mjesto na vašem računalu. Ova metoda je univerzalna i prikladna za profesionalce; može se koristiti za provjeru rada razne skripte i dodatke, eksperimentirajte s promjenom dizajna i uredite sve datoteke stranice, a nakon testiranja prenesite odgovarajuće promjene izravno na stranicu.
Za korisnike koji su daleko od umjetnosti webmastera, preporučujem korištenje preglednika za ove svrhe. Budući da koristim Chrome, dat ću upute sa snimkama zaslona za ovaj preglednik. Po analogiji, možete raditi s Opera, Yandex.Browser, Mozilla Firefox i drugim preglednicima; princip njihovih alata je sličan.
Uputa 1: kako pregledati cijeli HTML kod stranice u pregledniku
Otvorite traženu web stranicu svoje web stranice. Desnom tipkom miša kliknite traženi element, pojavit će se kontekstualni padajući izbornik preglednika s dostupnim naredbama:
Slika 1. Prikaz cijelog HTML koda web stranice u Chrome preglednik
Važno: Naredbe u padajućem izborniku mogu se razlikovati, na primjer, za aktivni elementi(linkovi, slike, videi) i neaktivni (tekst, pozadina, divovi):
Slika 2. Padajući izbornik preglednika Chrome
Dakle, ako ne pronađete naredbu koja vam je potrebna, samo kliknite desni gumb mišem na drugom mjestu ili koristite prečace preglednika.
Vratimo se na sliku 1, ona pokazuje potrebna naredba za prikaz cijelog HTML koda izvorne web stranice, zove se " Pogledajte kod stranice". Pritisnite naredbu i ona će se otvoriti nova kartica S puni kod izvorne web stranice, veliki plus svemu je to što je pregled dostupan s označavanjem sintakse:
Slika 3. Fragment koda ove stranice
Ovaj je alat vrlo koristan za pronalaženje i uređivanje elemenata koje tražite.
Alternativni načini za pregled cijelog HTML koda web stranice
Za više brz pristup, možete koristiti druge načine za pozivanje ovog alata
- Na slici 1 to također vidimo ovu naredbu dostupno preko tipkovničkog prečaca
+ ; - Zalijepite view-source:site u adresnu traku preglednika umjesto moje domene, umetnite svoju adresu;
Obje metode su univerzalne i trebale bi raditi u svim preglednicima.
Nekima će se u prvi mah učiniti da to uopće nije tako pravi alat, ali pregled cijelog HTML koda web-mjesta odličan je za pretraživanje unutar koda potrebni elementi, to mogu biti veze, oznake, meta oznake, atributi i drugi elementi.
Kombinacija prečaca
Slika 3. Pretraživanje po kodu stranice
Nakon što unesete zahtjev u obrazac za pretraživanje, ekran će se pomaknuti na prvi pronađeni element, pomoću strelica možete se kretati između njih i odabrati onaj koji vam je potreban:
Slika 4. Pretraživanje prema HTML kodu stranice
Uputa 2: kako pregledati i urediti HTML i CSS kod stranice u pregledniku Google Chrome
Sada najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod web stranice u pregledniku. zatim prenesite promjene u preglednik.
Ovako koristan alat uvijek dostupni u vašem pregledniku, eksperimentirajte s drugim naredbama koje će vam olakšati uređivanje stranice.
Vještina promijeniti izvorni kod stranice – korisna vještina za naprednog korisnika interneta. Zamjenom HTML koda možete promijeniti otvorena web stranica kako želiš. U ovom članku ćemo vam reći kako promijeniti kod stranice u pregledniku Google Chrome. Međutim, u drugim preglednicima sve se radi slično, tako da ne bi trebalo biti poteškoća.
Koji je HTML kod stranice?
Svaka stranica koju otvorite u pregledniku ima svoj jezični kod HTML označavanje. Ovaj kod predstavlja oznake i tekst. Oznake su jedinstvene oznake koje govore pregledniku kako da prikaže ovaj ili onaj dio stranice. Tekst je sadržaj stranice, ono što korisnik vidi. Također, CSS stilovi se mogu povezati sa stranicom, koja postavlja izgled elementi stranice. Do promijeniti izvorni kod stranice ne morate temeljito poznavati HTML i CSS i uskoro ćete se sami uvjeriti.
Zašto mijenjati web stranicu?
Možete zamijeniti podatke na stranici, promijeniti tekst poruke ili napraviti lažnu snimku zaslona. Imajte na umu da su sve promjene vidljive samo vama i da će nestati kada ponovno učitate stranicu. Također promijenjeni podaci neće biti stvarni. Na primjer, ako nemam 10 dolara i promijenim ih u 100, onda neću imati više novca. Ovo je samo prikaz stranice u pregledniku. Primjer:
Nakon:
Na primjer, uzet ću istu stranicu i promijeniti prethodnu najavu članka "" Otvaranje početna stranica u pregledniku Google Chrome. Desnom tipkom miša kliknem na element koji želim promijeniti, npr. naslov objave i odaberem “View code”.
U prozoru koji se otvori idite na karticu Elementi i pogledajte HTML kod stranice. U njemu trebamo pronaći tekst koji nas zanima. (podvučeno crveno)
Sada ću obrisati stari tekst i napisati novi.
To je sve, naslov objave je promijenjen. Sada ću promijeniti samu objavu, oznake i kategoriju.
Možete umetnuti drugu sliku promjenom atributa src u oznaci img.
" Ista stavka nalazi se iu kontekstnom izborniku koji, ako desnom tipkom miša kliknete tekst stranice. Također možete koristiti tipkovnički prečac CTRL + U. Mozilla FireFox ne koristi vanjske programe – original kodirati stranice s isticanjem sintakse otvorit će se u zasebnom prozoru preglednika.
U Internet preglednik Explorer, kliknite odjeljak "Datoteka" u izborniku i odaberite "Uredi u Notepadu". Umjesto naziva Notepad može biti napisano drugo ime, dodijelili ste ga u postavkama preglednika za pregled originala kodirati A. Na klik stranice desnom tipkom miša pojavljuje se kontekstni izbornik koji također ima stavku koja vam omogućuje otvaranje izvora kodirati stranice u vanjski program- "Pogledaj HTML" kodirati A".
U Preglednik Opera otvorite izbornik, idite na odjeljak "Stranica" i imat ćete priliku odabrati stavku "Izvor" u pododjeljku "Alati za razvoj" kodirati"ili stavku "Original kodirati okvir." Ovaj odabir se dodjeljuje vruće tipke CTRL+ U odnosno CTRL + SHIFT + U. U kontekstnom izborniku vezanom za klik stranice desnom tipkom miša, tu je i stavka "Inicijal kodirati" Opera izvor stranice u vanjskom programu koji je dodijeljen u OS-u ili u postavkama preglednika za uređivanje HTML datoteka.
Preglednik Google Chrome nedvojbeno ima najbolja organizacija gledanje originala kodirati A. Desnim klikom miša možete odabrati Pogled kodirati A stranice"i tada će se izvorni kod s isticanjem sintakse otvoriti u posebnoj kartici. Ili možete odabrati liniju "Prikaz" u istom izborniku kodirati element” i na istoj kartici će se otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS kodirati element stranice. Preglednik će reagirati na pomicanje kursora preko linija kodirati i isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a kodirati A.
Pustili smo nova knjiga"Sadržajni marketing u društvenim mrežama: Kako ući u glave svojih pretplatnika i navesti ih da se zaljube u vaš brend.”
Izvorni kod stranice je skup HTML oznaka, CSS stilovi I JavaScript skripte, koje preglednik prima od web poslužitelja.
Više videa na našem kanalu - naučite internet marketing uz SEMANTICA
Može se usporediti sa skupom naredbi koje vojnicima daje zapovjednik. Zamislite da publika ne vidi i ne čuje šefa. S njihove točke gledišta, vojska akcije provodi samostalno. U našem slučaju, zapovjednik je preglednik, naredbe su izvorni kod, a vojnici koji marširaju konačni su rezultat.
Stranica je pohranjena na web poslužitelju koji šalje stranicu na zahtjev korisnika. Zahtjev je upisivanje URL-a u adresnu traku, klik na vezu ili klik na gumb za slanje na obrascu. Nije važno na kojem su jeziku web stranice napisane, uključuju li softverski dio. Krajnji rezultat bilo kojeg algoritma na strani poslužitelja je skup html oznaka i teksta.
Izvorni kod stranice je skup podataka koji uključuje:
- html markup;
- lista stilova ili poveznica na datoteku;
- programe napisane u JavaScriptu ili poveznice na datoteke s kodom.
Ova tri odjeljka obrađuje preglednik. Za poslužitelj, ovo je jednostavno tekst koji treba poslati kao odgovor na zahtjev.
Zašto bismo možda trebali proučiti izvorni kod
Sve što vidimo možemo analizirati i primijeniti za rješavanje određenih problema koji nastaju u radu sa stranicom, posebice pri optimizaciji iste. Gledajući izvorni kod, možemo:
- Pogledajte meta oznake svoje ili tuđe web stranice kako biste ih analizirali.
- Pogledajte prisutnost ili odsutnost određenih elemenata na web mjestu: brojači, identifikacijski kodovi u raznih sustava, određene skripte i druge stvari.
- Saznajte parametre elemenata: veličine, boje, fontove.
- Pronađite put do fotografija i drugih elemenata koji se nalaze na stranici.
- Istražite veze sa stranice.
- Pronađite probleme s kodom koji ometaju proces optimizacije web stranice: one koji nisu riješeni u odvojene datoteke stilovi, skripte, nevažeći kod.
Ovo su osnovne značajke, ali zapravo, čitanjem koda možete saznati puno više o stranici.
Kako vidjeti izvorni kod stranice
To neće biti moguće učiniti u potpunosti u obliku u kojem je objavljeno na poslužitelju iz preglednika. Ali možete vidjeti sve oznake desnim klikom na stranicu. Ovdje i dalje Google primjer Krom.
Odaberite opciju "Prikaz koda stranice" i dohvatite cijeli popis u zasebnoj kartici.
To je samo tekst koji morate analizirati da biste ga razumjeli. Ali možete dobiti interaktivni kod pomoću alata za razvojne programere.
Kako pronaći izvorni kod web stranice
Kliknite na ikonu izbornika u pregledniku. Najčešće je s desne strane i izgleda kao tri točke ili pruge.
U odjeljku dodatni alati odaberite "Alati za razvojne programere".
Otvorit će se prozor koji prikazuje aktivno stanje koda. To znači da kada kliknete na oznaku, pored nje će se pojaviti stil elementa, a odabrani blokovi će biti označeni na stranici.
U kartici "Izvor" možete vidjeti sadržaj nekih datoteka: skripte, fontove, slike.
U kartici "Sigurnost" možete provjeriti certifikat stranice.
Kartica "Revizije" pomoći će vam provjeriti resurs objavljen na hostingu.
Ako je mjesto ploče s desne strane nezgodno, možete kliknuti tri točke i promijeniti ga odabirom željene stavke.
Kako vidjeti meta oznake
Svaki HTML dokument uključuje strukturne oznake. Evo nekih od njih:
- Html – cijeli dokument.
- Glava – odjeljak zaglavlja usluga.
- Naslov – naslov stranice (prikazuje se na kartici).
- Tijelo – tijelo dokumenta.
- H1-H6 – naslovi teksta stranice.
- Članak – članak.
- Sekcija - sekcija.
- Jelovnik – jelovnik.
- Div – blok.
- Raspon – niz.
- P – stavak.
- Stol – stol.
Elementi su dizajnirani za logično omeđivanje odjeljaka na stranici, ako je potrebno, dizajnirani su pomoću stilova. Sadrže tekst koji je na neki način vidljiv na stranici. Ali u oznaka Glava postoje servisne informacije. Meta oznake se koriste za označavanje. Sve što je u njima napisano namijenjeno je serveru i tražilicama.
Njihov sadržaj se ne može saznati na drugi način.
Obratimo pozornost na oznaku Link. Uz njegovu pomoć navedene su veze na vanjske uključene datoteke. Po želji možete vidjeti sadržaj i spremiti ga na disk. Da biste to učinili, pomaknite pokazivač na adresu i pritisnite RMB. Odaberite "Otvori u novoj kartici".
Otvorit će se u novoj kartici navedena datoteka, koje možete pogledati ili spremiti.
Kako vidjeti izvorni kod stranice za ispravljanje pogrešaka u skripti
U ovom slučaju najprikladnije je otvoriti stranicu na lokalni stroj. Ako samo trebate ispraviti oznake, stilove i skripte, to možete učiniti izravno iz mape. HTML kod se gleda na isti način. Ovdje su greške JavaScript kod možete vidjeti u kartici "Konzola". Ovo pokazuje opis greške i broj retka u kojem se pojavila.
Sintaksa se može vidjeti izravno u kodu. Tome služi kartica "Izvor".
Kako vidjeti kod određenog elementa
Za velike stranice S velik broj elemente je teško pronaći potreban kod kroz cijelo označavanje. U ovom slučaju, trebali biste koristiti posebna ekipa kontekstni izbornik. Pomaknite miš preko fragmenta i pritisnite RMB. Odaberite naredbu “View Code”.
Otvorit će se isti prozor, ali s fokusom na odabrani objekt.
Nastavi
Rekli smo vam koji je izvorni kod stranice. Dovoljno je savladati osnovno znanje HTML-a i CSS-a, te korištenja prikladni alati programera, možete ispravljati pogreške u vlastitim HTML dokumentima.
Gledanje izvornog koda na Internetu omogućit će vam da učite ne samo od vlastito iskustvo, ali i koristiti stvarne radne primjere. A za SEO stručnjake bit će korisne meta oznake, čije informacije mogu puno reći o web mjestu.
