Svaki korisnik interneta ima svoje omiljene stranice na kojima troši dugo vrijeme. I samo lijeni nisu pomislili da vide kako je nastao i od čega se sastoji. Na sva ova pitanja neće biti moguće odgovoriti, jer postoji mnogo načina za kreiranje stranice, ali pogledati komande i kodove od kojih se sastoji moguće je i javno dostupno svima.
Drugo je pitanje da li će osoba koja se ne bavi programiranjem razumjeti neke od simbola koji čine kod. Ali iz primjera koji će biti dati u nastavku bilo koji Google korisnik Chrome će moći vidjeti pojedinačni elementi web stranice.
Kako pogledati izvorni kod html stranice u Google pretraživaču
Da biste mogli da vidite kod stranice u Chromeu, potrebno je da odete na sajt koji vas zanima i sledite ove korake:
Ove dvije točke se razlikuju po svojoj funkcionalnosti i sadržaju informacija za korisnika, programera ili hakera. 
Koja je razlika između koda stranice i samo naredbe "Prikaži kod".
Analizirajući svaku od ovih funkcija, možete napisati poseban članak. Za programere je ova razlika značajna i oni razumiju u kojim slučajevima je potrebno koristiti "Prikaz koda", a u kojim "Prikaži kod stranice" u pretraživaču google chrome.
Ali objašnjavajući za prosječnog korisnika, ove funkcije se mogu podijeliti u sljedeće svrhe:
- "Prikaz koda stranice" je potreban samo za prikaz glavne kombinacije stranice. U osnovi - ovo je struktura stranice (bez dodatni modeli as CSS fajlovi i drugi dodaci koji su ostali u fascikli kreatora stranice). Ova struktura nije pogodno za izradu vlastitu stranicu“copy-paste”, ali će vam omogućiti da vidite šta je tačno programer uradio i kojim redosledom da bi sajt u pretraživaču Google Chrome imao takav eksterni dizajn.
- "Prikaz koda" prikazuje detaljnu strukturu koja naglašava sva područja na koja se to odnosi na stranici. Ako ukažete na specifičan kod lista - istaći će element na stranici kojoj pripada.
- Pregledanje koda stranice otvara se u posebnom pretraživaču bez mogućnosti njegovog uređivanja. Odnosno, pogodan je samo za kopiranje i čitanje koda stranice. Ali to je jednako korisna karakteristika.
- “View Code” je promjenjiv i možete uređivati 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 popeti se kroz te postavke i jednostavno shvatiti čemu služi ova ili ona vrijednost i šta će se dogoditi ako je promijenite. Ne biste trebali pretpostaviti da ćete na ovaj način naštetiti sebi ili web stranici - ove promjene utiču samo na kod vašeg Google Chrome-a i ne idu na internet.
S obzirom na pitanje kako vidjeti kod elementa
Ako ćemo odgovoriti na takvo pitanje, onda se nameće samo varijanta sa primjerom. Jer vrlo je teško postati osoba koja se razumije u ovu temu (web developer) u jednom članku, ali je mnogo lakše pokazati primjerom kako bi se pitanje riješilo.
Funkcionalnost koda elementa je vrlo široka, pa uzimamo jednu od riječi na stranici Google pretraživač 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 funkcije u pregledniku Google Chrome
Općenito, nastavljajući s odgovorom na pitanje kako gledati na kod elementa i zašto je potreban, treba navesti njegove funkcije. Naime, zahvaljujući mogućnosti pregleda koda elementa bilo koje stranice u pregledniku Google Chrome, možemo:
- Pogledajte strukturu sajta počevši od glave (“zaglavlje sajta”) i završavajući sa end (konačna komanda bilo kojeg programa);
- Pregledajte sve funkcije sajta, i to: linkove ka drugim sajtovima, dodatne module sa eksternih sajtova i prisustvo ugrađenih brojača za prikupljanje raznih informacija;
- Saznajte da li je kopiranje sa stranice zabranjeno ili ne;
- Kod će zabilježiti sve veze na druge stranice stranice, kao i njihov dizajn i naknadne radnje nakon klika na njih.
Ovo je daleko od potpune liste. Ali treba podsjetiti da bez posebnog znanja - "pročitajte" kod Google stranice Chrome je gotovo nemoguć i dobiveni podaci običan korisnik praktično nije potrebno.
Stavka "Prikaži šifru elementa" ne radi
Treba odmah reći - svaka stranica će biti sa otvoreni pristup na kodove elemenata. To jest, čak i najpopularnije i najskuplje stranice će biti otvorene za pregled njihovog koda. Stoga, ako stavka u pregledniku Google Chrome nije aktivna ili daje grešku, to ima sljedeće moguće razloge:
- Korisnički profil je oštećen;
- Prisutnost zlonamjernog softvera na računaru;
- Blokiranje određenom ekstenzijom radi povećanja performansi (čak i ovo može biti).
Popravljanje oštećenog korisničkog profila
Stvoriti novi profil, potrebno je da uklonite stari sa svog računara. Da biste to učinili, učinite sljedeće:
- Zatvorite Google Chrome i pokrenite ugrađeni Windows pretraživač explorer.
- Ulazimo u adresna traka sljedeću naredbu: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Kada se direktorij otvori, potražite folder “Default” i dodajte “Backup” u njegovo ime kako biste dobili sljedeće: “Backup Default”.
- Sada, nakon novog pokretanja Chrome pretraživača, biće kreiran novi profil.
Uklanjanje zlonamjernog softvera ili njegovih ostataka
Ako nam novi profil nije dao pristup kodu elementa stranice i još uvijek vidimo grešku, trebali bismo učiniti sljedeće:
- Otvaranje komande Windows string("Pokreni") i tamo unesite komandu "cmd".
- Unesite sljedeću naredbu u red: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
- Nakon potvrde akcije, ubacujemo ovo: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".
- Sada "gpupdate /force" (bez navodnika).
Ako je sve urađeno ispravno, onda nakon ponovnog pokretanja google kompjuter Chrome će otvoriti kod elemenata i pretraživač će raditi normalno.
Dugo vremena za mene je opcija "prikaži izvor stranica" bio beskorisan i nezanimljiv. ćao učenje HTML-a na Codecademyju i izgled mojih web stranica nisu prerasli u moj novi hobi. A onda se postavilo pitanje: gdje pronaći stvarni slučajevi i pozajmiti zanimljiva rješenja za tvoju kasicu-prasicu? Odgovor je bio iznenađujuće jednostavan, kao i svi genijalci: pogledajte izvorni kod stranice u Google Chrome-u! Dijelim sa vama svoje skromne nalaze.
Šta je izvorni kod stranice
Ako i vi, poput mene, tek radite prve korake u HTML programiranju, neće biti suvišno znati koji je izvorni kod stranice.
Izvorni kod, poznat i kao HTML kod stranice, je tekst u jeziku za označavanje hiperteksta (HTML). Uključuje stvarni sadržaj stranice (tekst, tabele) i oznake. Potonji igraju ulogu instrukcija za pretraživač: kako prikazati sadržaj, kakvu vrstu formatiranja koristiti, gdje umetnuti hipervezu ili medijsku datoteku. Pa, za nas, programere početnike, izvorni kod je najbolji teren za obuku: pronađemo zanimljivu stranicu i zavirimo, spremamo, koristimo uspješne fragmente. Kako?
Kako pogledati izvorni kod na stranici Google Chrome pretraživača
Pronađite stranicu koja vam se sviđa. Na primjer, mene je zanimao dizajn menija stranice. Postoje tri načina za otvaranje izvornog koda u pregledniku Google Chrome:
- Kliknite na ikonu meni u desno gornji ugao pretraživač i odaberite " Dodatni alati". Između ostalog, postoji i opcija "Prikaz izvornog koda". Priznajem da ga retko koristim. ovu metodu: puno nepotrebnih pokreta. Može se učiniti još lakšim.
- Pritisnite kombinaciju tastera Ctrl+U- otvara novi prozor sa izvornim kodom;
- Za ljubitelje kontekstnog menija: kliknite desnim tasterom miša na stranicu i izaberite opciju "Prikaži kod stranice".
Mi smo se nosili sa zadatkom pregleda HTML koda stranice u pretraživaču. Prelazimo na najzanimljiviju fazu.
Kako urediti i sačuvati izvorni kod
Da biste naučili kako kreirati web stranice, nije dovoljno pročitati tuđi HTML kod. Morate se igrati s njim, eksperimentirati, unositi izmjene i provjeriti rezultat. Možete čak početi sastavljanjem nekoliko uspješnih uzoraka. Kako urediti i sačuvati izvorni kod?
Opcija 1. "Ručno"
Nakon što smo otvorili izvorni kod stranice, pozivamo kontekstni meni i odaberite opciju "Sačuvaj kao" i sačuvajte datoteku u HDD. Uređujemo datoteku u Notepad-u ili Notepad-u, spremamo promjene i otvaramo kroz pretraživač. Rezultati naših promjena (uspješnih i ne tako dobrih) će se odraziti u prozoru pretraživača.
Opcija 2. Za profesionalce
Kada se svaki dan "igrate" sa izvornim kodom, proces "spremi - otvori - promijeni - sačuvaj - provjeri" je naporan. Za sebe sam pronašao rješenje u vidu instaliranja dodatka za Google Chrome - Firebug Lite. Omogućava vam da uredite i sačuvate izvorni kod bez napuštanja prozora pretraživača.
Vještina promijeniti izvorni kod stranice – korisna vještina za napredne korisnike interneta. Uz pomoć zamjene HTML koda, možete promijeniti otvori web stranicu kako hoćeš. U ovom članku ćemo reći kako promijeniti kod stranice u Google Chromeu. Međutim, u drugim pretraživačima sve se radi na isti način, tako da ne bi trebalo biti poteškoća.
Šta je HTML kod stranice?
Svaka stranica koju otvorite u pretraživaču ima svoj kod na jeziku HTML markup. Ovaj kod su oznake i tekst. Oznake su neka vrsta oznaka koje govore pretraživaču kako da prikaže određeni dio stranice. Tekst je sadržaj stranice, ono što korisnik vidi. Također, stranica se može povezati CSS stilovi, koji je postavljen izgled elementi stranice. To promijeniti izvorni kod stranice ne morate temeljito poznavati HTML i CSS i uskoro ćete se u to uvjeriti.
Zašto mijenjati web stranicu?
Možete promijeniti podatke na stranici, promijeniti tekst poruke, 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 dolara, onda neću imati više novca. To je samo prikazivanje stranice od strane pretraživača. primjer:
nakon:
Na primjer, uzet ću istu stranicu i promijeniti prethodnu najavu članka “” Otvaram glavnu stranicu 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. Moramo pronaći tekst koji nas zanima. (označeno crvenom bojom)
Sada ću izbrisati stari tekst i unijeti novi.
To je to, naziv oglasa je promijenjen. Sada ću promijeniti samu najavu, oznake i kategoriju.
Možete umetnuti drugu sliku promjenom src atributa u oznaci img.
Pregledavajući bezbroj sajtova na internetu, možete pronaći one koje nam se jako sviđaju. Odmah se nameće brojna pitanja. Da li je stranica napravljena korištenjem samopisnog koda ili neke vrste CMS-a? Koji su njegovi CSS stilovi? Koje su njegove meta oznake? I tako dalje.
Postoji mnogo alata koji se mogu koristiti za izdvajanje informacija o kodu stranice web-mjesta. Ali uvek imamo pri ruci desni taster miša. Mi ćemo ga koristiti, koristeći primjer moje stranice.
Kako pogledati kod stranice?
Da biste vidjeli izvorni kod web stranice, morate pomaknuti pokazivač miša preko bilo kojeg područja web stranice (osim slika i veza). Nakon toga kliknite na desno dugme miševi. Otvoriće se prozor sa nekoliko opcija (in različitim pretraživačima mogu se neznatno razlikovati). U pregledniku Google Chrome, na primjer, ovo su naredbe:
- leđa;
- naprijed;
- reload;
- sačuvaj 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.
Pregledanje koda stranice: šta tražiti?
Dakle, kod HTML stranice je numerisana lista linija, od kojih svaka nosi informacije o tome kako je ova stranica napravljena. Da brzo naučite da ovo razumete ogroman broj znakovi i specijalni znakovi, morate razlikovati različite dijelove koda.
Na primjer, linije koda koje se nalaze unutra head tag sadrže informacije za tražilice i webmasteri. Oni nisu prikazani na sajtu. Ovdje možete vidjeti koje ključne riječi ova stranica je promovisana, jer je napisan njen naslov i opis. Ovdje također možete pronaći link, klikom na koji saznajemo o porodici Google fontova koja se koristi na stranici.
Ako je stranica napravljena na CMS WordPress ili Joomla, onda će i ovo biti vidljivo ovdje. Na primjer, ovo područje prikazuje informacije o WordPress tema ili Joomla predložak stranice. Možete ga vidjeti čitajući sadržaj linkova označenih plavom bojom. Jedna veza prikazuje predložak web stranice.
Na primjer:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Vidjet ćemo CSS stilove fonta stranice. AT ovaj slučaj koristi se font. Ovo se može vidjeti ovdje - porodica fontova: 'Source Sans Pro'.
Ova web stranica je optimizirana sa SEO dodatkom. Yoast SEO. Ovo se može vidjeti iz ovog komentiranog dijela koda:
Ova stranica je optimizirana sa Yoast SEO dodatak v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Sve informacije unutra body tag, koje pretraživač prikazuje na ekranu monitora. Ovdje vidimo html kod stranice, a na samom dnu je kod skripte Yandex Metrics. Umotana je u komentiranu oznaku s tekstom:
/Yandex.metric counter
Sažimanje
Nakon prilično površne analize koda početna stranica stranice, možemo zaključiti o alatima pomoću kojih 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 stranice stranice sasvim jasan. Nije potrebno držati stranicu pod istragom otvorenom u pretraživaču. Kôd stranice možete sačuvati na računar koristeći kombinacije tastera ctrl + a, ctrl + c, ctrl + v. Zalijepite u bilo koji uređivač teksta(po mogućnosti Notepad++) i sačuvajte sa html ekstenzija. Stoga ga u svakom trenutku možete dublje proučiti i pronaći više korisnih informacija za sebe.
Potrebno je brzo vidjeti sve promjene na samom sajtu, bez uticaja na fajlove i kod sajta postavljene na Internet. Na primjer, promjena sema boja bilo koji blok, premjestiti element koji se pomaknuo, itd.
Da bi to učinili, mnogi webmasteri koriste lokalni serveri Denwer ili OpenServer pokretanjem puna kopija sajt na vašem računaru. Ova metoda je univerzalna i prikladna za profesionalce, s njom možete provjeriti rad raznih skripti i dodataka, eksperimentirati s promjenom dizajna i uređivati sve datoteke web stranice, a nakon testa prenijeti odgovarajuće promjene direktno na stranicu.
Za korisnike koji su daleko od umjetnosti webmastera, preporučujem korištenje pretraživača u ove svrhe. Pošto koristim Chrome, daću uputstva sa snimcima ekrana za ovaj konkretan pretraživač. Po analogiji, možete raditi s Opera, Yandex.Browser, Mozilla Firefox i drugih pretraživača, princip njihovih alata je sličan.
Uputstvo 1: kako da vidite ceo HTML kod sajta u pretraživaču
Otvorite potrebnu web stranicu svoje stranice. Desnom tipkom miša kliknemo na traženi element, pojavit će se padajući meni preglednika s dostupnim komandama:
Slika 1. Pregled cijelog HTML koda web stranice u Chrome pretraživaču
Bitan: Komande u padajućem meniju mogu se razlikovati, na primjer, za aktivnih elemenata(linkovi, slike, video zapisi) i neaktivni (tekst, pozadina, divovi):
Slika 2. Padajući meni preglednika Chrome
Stoga, ako ne pronađete komandu koja vam je potrebna, samo kliknite desnim tasterom miša negde drugde ili koristite prečice u pretraživaču.
Vraćajući se na sliku 1, prikazuje potrebnu naredbu za pregled cijelog HTML koda originalne web stranice, zove se " Pogledajte kod stranice". Kliknite na komandu da otvorite novi tab With kompletan kod originalna web stranica, veliki plus za sve - pregled je dostupan uz isticanje sintakse:
Slika 3. Isječak koda za ovu stranicu
Ovaj alat je vrlo koristan za pronalaženje i uređivanje elemenata koje tražite.
Alternativni načini za pregled svih HTML web stranica
Za više brz pristup, možete koristiti druge načine da pozovete ovaj alat
- To vidimo i na slici 1 data komanda dostupno prečicom na tastaturi
+ ; - Zalijepite u adresnu traku pretraživača view-source: site umjesto moje domene, zalijepite svoju adresu;
Obje metode su univerzalne i trebale bi raditi u svim pretraživačima.
U početku se nekima može učiniti da to uopće nije pravi alat, ali pregledavanje cijelog HTML koda web mjesta je odlično za pretraživanje koda neophodni elementi, to mogu biti veze, oznake, meta tagovi, atributi i drugi elementi.
Kombinacija vrućih tipki
Slika 3. Pretraživanje prema kodu stranice
Nakon što podnesete zahtjev za formular za pretragu ekran će se pomeriti na prvi pronađeni element, koristeći strelice možete se kretati između njih i odabrati onaj koji vam je potreban:
Slika 4. Pretraživanje po HTML kod site
Uputstvo 2: Kako pregledati i urediti HTML i CSS kod web stranice u Google Chrome pretraživaču
Sada najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod stranice u pretraživaču. zatim prenesite promjene u pretraživač.
Volim ovo koristan alat uvijek dostupni u vašem pretraživaču, eksperimentirajte s drugim komandama koje će vam olakšati uređivanje stranice.
