Svaki korisnik interneta ima svoje omiljene stranice na kojima provodi dugo vremena. A samo lijeni nisu mislili vidjeti kako je nastala i od čega se sastoji. Na sva ova pitanja neće biti moguće odgovoriti, jer postoji mnogo načina za izradu stranice, ali pogledati naredbe i kodove od kojih se ona sastoji moguće je i javno dostupno svima.
Drugo je pitanje hoće li osoba koja se ne bavi programiranjem razumjeti bilo koji od simbola koji čine kod. Ali iz primjera koji će se pokazivati ispod, svaki korisnik Google Chromea moći će vidjeti pojedinačne elemente web-mjesta.
Kako pogledati izvorni kod html stranice u Google pregledniku
Da biste mogli vidjeti kod stranice u Chromeu, trebate otići na web-lokaciju koja vas zanima i slijediti ove korake:
Ove se dvije točke međusobno razlikuju po svojoj funkcionalnosti i informativnoj vrijednosti za korisnika, programera ili hakera. 
Koja je razlika između koda stranice i samo naredbe "Pregled koda".
Analizirajući svaku od ovih funkcija, možete napisati poseban članak. Za programere je ova razlika značajna i razumiju u kojim slučajevima je potrebno koristiti "Pogledaj kod", a u kojim "Pogledaj kod stranice" u pregledniku Google Chrome.
No, objašnjavajući za prosječnog korisnika, ove funkcije možete podijeliti u sljedeće zadatke:
- "Prikaz koda stranice" potreban je samo za prikaz glavne kombinacije stranice. U osnovi, ovo je struktura stranice (bez dodatnih modela u obliku CSS datoteka i drugih dodataka koji su ostali u mapi kreatora stranice). Ova struktura nije prikladna za izradu vlastite stranice "copy-paste", ali će vam omogućiti da vidite što je točno programer napravio i kojim redoslijedom kako bi stranica u pregledniku Google Chrome imala takav vanjski dizajn.
- Prikaz koda prikazuje detaljnu strukturu naglašavajući sva područja koja su pogođena na stranici. Ako zadržite pokazivač iznad određenog koda popisa, on će istaknuti element na web-mjestu kojem pripada.
- Prikaz koda stranice otvara se u zasebnom pregledniku bez mogućnosti uređivanja. Odnosno, prikladan je samo za kopiranje i čitanje koda web-mjesta. Ali ovo je jednako korisna značajka.
- "Prikaz koda" je promjenjiv i možete uređivati bilo koji element kako vam odgovara. Naravno, sve te promjene će "živjeti" dok se stranica ne osvježi, ali ponekad je smiješno proći kroz te postavke i jednostavno shvatiti čemu služi ova ili ona vrijednost i što će se dogoditi ako je promijenite. Nemojte pretpostavljati da ćete time naštetiti sebi ili web-mjestu - ove promjene vrijede samo u kodu vašeg Google Chromea i ne idu na internet.
Razmotrite pitanje kako vidjeti kod elementa
Ako ćemo odgovoriti na takvo pitanje, onda se nameće samo varijanta s primjerom. Jer u jednom članku vrlo je teško postati osoba koja će razumjeti ovu temu (web developer), ali pokazati primjerom da se pitanje riješi puno je lakše.
Funkcionalnost koda elementa je vrlo široka, pa uzimamo jednu od riječi na stranici preglednika Google Chrome. Htjeli smo razmotriti koje su ključne riječi (u kodu će biti napisane 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 odgovarati na pitanje kako vidjeti kod elementa i zašto je potreban, 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 (posljednja naredba bilo kojeg programa);
- Pregledajte sve funkcije stranice, i to: poveznice na druge stranice, dodatne module s vanjskih stranica i prisutnost ugrađenih brojača za prikupljanje raznih informacija;
- Saznajte je li kopiranje sa stranice zabranjeno ili ne;
- Kod će sadržavati sve poveznice na druge stranice stranice, kao i njihov dizajn i naknadne radnje nakon klika na njih.
Ovo je daleko od konačnog popisa. No, treba se podsjetiti da je bez posebnog znanja gotovo nemoguće "pročitati" kod stranice Google Chrome, a dobiveni podaci praktički su nepotrebni za običnog korisnika.
Stavka "Pogledaj šifru artikla" ne radi
Odmah treba reći da će svaka stranica imati otvoren pristup kodovima elemenata. To jest, čak i najpopularnije i najskuplje stranice bit će otvorene za pregled njihovog koda. Stoga, ako stavka u pregledniku Google Chrome nije aktivna ili daje pogrešku, to ima sljedeće moguće razloge:
- Korisnički profil je oštećen;
- Prisutnost zlonamjernog softvera na računalu;
- Blokiranje s određenim proširenjem radi povećanja performansi (čak i ovo može biti).
Popravljanje oštećenog korisničkog profila
Da biste stvorili novi profil, morate izbrisati stari s računala. Da biste to učinili, učinite sljedeće:
- Zatvorite Google Chrome i pokrenite ugrađeni preglednik Windows Explorer.
- Unesite sljedeću naredbu u adresnu traku:% LOCALAPPDATA% \ Google \ Chrome \ Korisnički podaci \.
- Kada se direktorij otvori, potražite mapu "Default" i dodajte "Backup" u njezin naziv da biste dobili sljedeće: "Backup Default".
- Sada nakon ponovnog pokretanja preglednika Chrome, kreirat će se novi profil.
Uklanjamo zlonamjerni softver ili njegove ostatke
Ako nam novi profil nije omogućio pristup kodu elementa stranice i još uvijek vidimo pogrešku, trebali bismo učiniti sljedeće:
- Otvorite naredbeni redak sustava Windows ("Run") i tamo unesite naredbu "cmd".
- Unesite sljedeću naredbu u redak: RD / S / Q "% WinDir% \ System32 \ GroupPolicyUsers".
- Nakon potvrde radnje, ubacujemo ovo: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".
- Sada "gpupdate / force" (bez navodnika).
Ako je sve učinjeno ispravno, nakon ponovnog pokretanja računala, Google Chrome će otvoriti kod elementa i preglednik će raditi normalno.
Dugo mi je opcija “pokaži izvorni kod stranice” bila beskorisna i nezanimljiva. Do sada učenje HTML-a na Codecademyju i izgled vlastitih stranica nije prerastao u moj novi hobi. Ovdje se postavilo pitanje: gdje pronaći stvarne slučajeve i posuditi zanimljiva rješenja za svoju "kasicu-prasicu"? Odgovor je bio neočekivano jednostavan, kao i sve genijalno: pogledajte izvorni kod stranice u Google Chromeu! Dijelim s vama svoje skromne nalaze.
Što je izvorni kod stranice
Ako i vi, poput mene, tek radite prve korake u HTML-programiranju, neće biti suvišno saznati koji je izvorni kod stranice.
Izvorni kod, također poznat kao HTML kod stranice, je tekst u jeziku za označavanje hiperteksta (HTML). Uključuje stvarni sadržaj stranice (tekst, tablice) i oznake. Potonje djeluju kao upute za preglednik: kako prikazati sadržaj, kakvu vrstu oblikovanja koristiti, gdje umetnuti hipervezu ili medijsku datoteku. Pa, za nas, programere početnike, izvorni kod je najbolji poligon: pronađemo zanimljivu stranicu i špijuniramo je, spremamo, koristimo uspješne fragmente. Kako?
Kako vidjeti izvorni kod na stranici preglednika Google Chrome
Pronađite stranicu koja vam se sviđa. Na primjer, zanimao me dizajn izbornika stranice. Postoje tri načina za otvaranje izvornog koda u pregledniku Google Chrome:
- Kliknite na ikonu izbornik u gornjem desnom kutu preglednika i odaberite stavku "Dodatni alati". Između ostalih, tu je i opcija "Pogledaj izvorni kod". Iskreno, rijetko koristim ovu metodu: puno nepotrebnih pokreta. Može se učiniti još lakšim.
- Pritisnite kombinaciju tipki Ctrl + U- otvara se novi prozor s izvornim kodom;
- Za ljubitelje kontekstnog izbornika: desnom tipkom miša kliknite stranicu i odaberite opciju "Prikaz koda stranice".
Nosili smo se sa zadatkom pregleda HTML koda stranice u pregledniku. Prijeđimo na najzanimljiviju fazu.
Kako urediti i spremiti izvorni kod
Da biste naučili kako izraditi web stranice, nije dovoljno pročitati tuđi HTML kod. Morate se igrati s njim, eksperimentirati, unositi promjene i provjeriti rezultat. Možete čak započeti sastavljanjem nekoliko dobrih primjera. Kako mogu urediti i spremiti izvorni kod?
Opcija 1. "Ručno"
Nakon što smo otvorili izvorni kod stranice, pozivamo kontekstni izbornik i odabiremo opciju "Spremi kao" i spremamo datoteku na tvrdi disk. Uređujemo datoteku u Notepadu ili Notepadu, spremamo promjene i otvaramo je putem preglednika. Rezultati naših promjena (dobri i loši) odrazit će se u prozoru preglednika.
Opcija 2. Za profesionalce
Kada se svaki dan "igrate" s izvornim kodom, proces "spremi - otvori - promijeni - spremi - provjeri" je zamoran. Za sebe sam pronašao rješenje u vidu instaliranja dodatka za Google Chrome – Firebug Lite. Omogućuje vam uređivanje i spremanje izvornog koda bez napuštanja prozora preglednika.
Vještina promijeniti izvorni kod stranice To je korisna vještina za napredne korisnike interneta. Zamjenom HTML koda možete promijeniti otvorenu web stranicu kako želite. U ovom članku ćemo vam reći, kako promijeniti kod stranice u Google Chromeu. Međutim, u drugim preglednicima sve se radi na isti način, tako da ne bi trebalo biti nikakvih poteškoća.
Što je HTML kod stranice?
Svaka stranica koju otvorite u pregledniku ima svoj HTML označni jezik. Ovaj kod su oznake i tekst. Oznake su vrste oznaka koje pregledniku govore kako prikazati određeni dio stranice. Tekst je sadržaj stranice, ono što korisnik vidi. Također, na stranicu se mogu povezati CSS stilovi koji postavljaju izgled elemenata stranice. Do promijeniti izvorni kod stranice Ne morate detaljno poznavati HTML i CSS, a uskoro ćete se i sami uvjeriti u to.
Zašto mijenjati web stranicu?
Možete promijeniti podatke na web mjestu, promijeniti tekst poruke, napraviti lažnu snimku zaslona. Imajte na umu da su sve promjene vidljive samo vama i kada ponovno učitate stranicu, one će nestati. Također promijenjeni podaci neće biti stvarni. Na primjer, ako nemam 10 dolara, a promijenim na 100, onda neću imati više novca. Ovo je samo prikaz stranice u pregledniku. Primjer:
Nakon:
Kao primjer uzet ću istu stranicu i izmijeniti prethodnu najavu članka “” Otvaranje početne stranice u Google Chromeu. Desnom tipkom miša kliknite na element koji želim promijeniti, na primjer, naslov objave i odaberite "View Code".
U prozoru koji se otvori idite na karticu Elementi i pogledajte HTML kod stranice. U njemu trebate pronaći tekst koji nas zanima. (podvučeno crvenom bojom)
Sada ću izbrisati stari tekst i unijeti novi.
To je sve, promijenjen je naslov objave. Sada ću promijeniti samu najavu, oznake i naslov.
Možete umetnuti drugu sliku promjenom atributa src u oznaci img.
Pregledavajući nebrojene stranice na Internetu, možete pronaći neke koje nam se jako sviđaju. Odmah se nameće niz pitanja. Je li stranica napravljena korištenjem samopisnog koda ili nekog CMS-a? Koji su njegovi CSS stilovi? Koje su njegove meta oznake? itd.
Postoji mnogo alata koji se mogu koristiti za izdvajanje informacija o kodu stranice web-mjesta. Ali uvijek imamo pri ruci desnu tipku miša. Koristit ćemo ga, na primjeru moje stranice.
Kako mogu vidjeti kod stranice?
Da biste vidjeli izvorni kod stranice web-mjesta, trebate zadržati pokazivač miša preko bilo kojeg područja web-stranice (osim slika i poveznica). Nakon toga kliknite desnu tipku miša. Pred nama će se otvoriti prozor s nekoliko opcija (mogu se malo razlikovati u različitim preglednicima). U pregledniku Google Chrome, na primjer, ovo su naredbe:
- leđa;
- naprijed;
- ponovno podizanje sustava;
- Spremi kao;
- pečat;
- prevesti na ruski;
- prikaz koda stranice;
- pogledajte kod.
Moramo kliknuti na prikaz koda stranice, a pred nama će se otvoriti html kod stranice stranice.
Pogledajte kod stranice: što tražiti?
Dakle, Html kod stranice je numerirani popis redaka, od kojih svaki nosi informacije o tome kako je ova stranica napravljena. Da biste brzo naučili razumjeti ovaj ogroman broj znakova i posebnih znakova, morate razlikovati različite dijelove koda.
Na primjer, retke koda unutar oznake head sadrže informacije za tražilice i webmastere. Nisu prikazani na stranici. Ovdje možete vidjeti po kojim se ključnim riječima ova stranica promovira, kako je napisan njen naslov i opis. Također ovdje možete pronaći poveznicu, klikom na koju saznajemo o obitelji Google fontova koji se koriste na stranici.
Ako je stranica napravljena na CMS WordPress ili Joomla, onda će se i ovdje vidjeti. Na primjer, ovo područje prikazuje informacije o WordPress temi ili Joomla predlošku stranice. Možete ga vidjeti čitajući sadržaj poveznica označenih plavom bojom. Jedna poveznica prikazuje predložak stranice.
Na primjer:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Vidjet ćemo CSS stilove za fontove stranice. U ovom slučaju se koristi font. Možete ga vidjeti ovdje - font-family: 'Source Sans Pro'.
Ova je stranica optimizirana pomoću Yoast SEO SEO dodatka. To se može vidjeti iz ovog komentiranog dijela koda:
Ova je stranica optimizirana s Yoast SEO dodatkom v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Sve informacije unutar oznake tijela preglednik prikazuje na zaslonu monitora. Ovdje vidimo html kod stranice, a na samom dnu je kod skripte Yandex Metrics. Umotana je u komentiranu oznaku s tekstom:
/Yandex.Metrika brojač
Sumirati
Nakon što smo izvršili prilično površnu analizu koda glavne stranice stranice, možemo zaključiti uz pomoć kojih alata je ova stranica napravljena. Na njemu smo vidjeli:
- CMS WordPress;
- Google font Source Sans Pro
- WordPress tema - Sydney;
- Yoast dodaci;
- Brojač Yandex metrika.
Sada je princip analize html koda web stranice sasvim jasan. Uopće nije potrebno istraženu stranicu držati otvorenom u pregledniku. Kôd stranice možete spremiti na svoje računalo pomoću kombinacija tipki ctrl + a, ctrl + c, ctrl + v. Zalijepite ga u bilo koji uređivač teksta (po mogućnosti Notepad ++) i spremite ga s html ekstenzijom. Stoga ga u svakom trenutku možete dublje proučiti i pronaći više korisnih informacija za sebe.
Potrebno je brzo pogledati sve promjene na samoj stranici, bez utjecaja na datoteke i kod stranice objavljene na Internetu. Na primjer, promijenite shemu boja bloka, pomaknite pokretni element itd.
Da bi to učinili, mnogi webmasteri koriste lokalne poslužitelje Denwer ili OpenServer, pokrećući punu kopiju stranice na svom računalu. Ova metoda je univerzalna i prikladna za profesionalce, uz pomoć nje možete provjeriti rad raznih skripti i dodataka, eksperimentirati s promjenom dizajna i uređivati sve datoteke web-mjesta, a nakon testa prenijeti odgovarajuće promjene izravno na web-mjesto.
Za korisnike koji su daleko od umjetnosti webmastera, preporučam korištenje preglednika u ove svrhe. Budući da koristim Chrome, dat ću upute sa snimkama zaslona za ovaj preglednik. Analogno, možete raditi s Opera, Yandex Browser, Mozilla Firefox i drugim preglednicima, princip njihovih alata je sličan.
Upute 1: kako vidjeti cijeli HTML kod web stranice u pregledniku
Otvorite potrebnu web stranicu za svoju web stranicu. Desnom tipkom miša kliknite na traženi element, pojavit će se kontekstni padajući izbornik preglednika s dostupnim naredbama:
Slika 1. Pregled cijelog HTML koda web stranice u pregledniku Chrome
Važno: Naredbe u padajućem izborniku mogu se razlikovati, na primjer, za aktivne elemente (veze, slike, videozapisi) i neaktivne (tekst, pozadina, dive):
Slika 2. Padajući izbornik preglednika Chrome
Stoga, ako niste pronašli potrebnu naredbu, samo kliknite desnom tipkom miša na drugom mjestu ili upotrijebite prečace preglednika.
Vraćajući se na sliku 1, prikazuje potrebnu naredbu za pregled cijelog HTML koda izvorne web stranice, zove se " Pogledajte kod stranice". Kliknemo na naredbu, otvorit će se nova kartica s punim kodom izvorne web stranice, veliki plus za sve - pogled je dostupan s isticanjem sintakse:
Slika 3. Fragment koda ove stranice
Ovaj alat je vrlo koristan za pronalaženje i uređivanje stavki koje tražite.
Alternativni načini za pregled cijelog HTML koda web stranice
Za brži pristup možete koristiti druge metode pozivanja ovog alata
- Na slici 1 također vidimo da je ova naredba dostupna preko tipkovničkog prečaca
+ ; - Umetnite u adresnu traku preglednika view-source: mjesto umjesto moje domene, umetnite svoju adresu;
Obje metode su univerzalne i trebale bi raditi u svim preglednicima.
U početku će se nekima učiniti da ovo uopće nije nužan alat, ali pregledavanje cijelog HTML koda stranice odlično je za pronalaženje potrebnih elemenata u kodu, to mogu biti linkovi, oznake, meta oznake, atributi i ostali elementi.
Kombinacija prečaca
Slika 3. Pretraživanje prema kodu web-mjesta
Nakon što unesete upit u obrazac za pretraživanje, zaslon će se pomaknuti na prvi pronađeni element, pomoću strelica možete se kretati između njih i odabrati željeni:
Slika 4. Pretraživanje po HTML kodu stranice
Uputa 2: kako pregledati i urediti HTML i CSS kod stranice u pregledniku Google Chrome
Sada za najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod stranice u pregledniku. zatim prenesite promjene u preglednik.
Takav koristan alat uvijek je dostupan u vašem pregledniku, eksperimentirajte s drugim naredbama koje će vam olakšati uređivanje stranice.
