Dugo vremena za mene je opcija "pokaži izvor stranice" bio beskoristan i nezanimljiv. Do sada učenje HTML-a na Codecademyju i dizajniranje vlastitih web stranica nije preraslo u moj novi hobi. Ovdje se postavilo pitanje: gdje pronaći stvarni slučajevi i posuditi zanimljiva rješenja za svoju “kasicu prasicu”? Odgovor je bio neočekivano jednostavan, kao i sve genijalne stvari: pogledajte izvorni kod stranice u Google Chrome! Dijelim s vama svoja skromna otkrića.
Koji je izvorni kod stranice
Ako i vi, poput mene, tek radite svoje prve korake u HTML programiranju, bilo bi dobro saznati koji je izvorni kod stranice.
Izvorni kod, također poznat kao kod HTML stranice, je tekst u Hyper Text Markup Language (HTML). Uključuje stvarni sadržaj stranice (tekst, tablice) i oznake. Potonje djeluju kao upute za preglednik: kako prikazati sadržaj, koju vrstu oblikovanja koristiti, gdje umetnuti hipervezu ili medijsku datoteku. Pa, za nas, programere početnike, izvorni kod je najbolji teren za vježbanje: pronađemo zanimljivu stranicu i špijuniramo je, spremimo i 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 jelovnika stranice. Otvoreni izvorni kod na Google preglednik Chrome se može napraviti na tri načina:
- Kliknite na ikonu Jelovnik u desnoj gornji kut preglednik i odaberite " Dodatni alati" Među ostalim, postoji opcija “View source code”. Iskreno, rijetko ga koristim ovu metodu: puno nepotrebnih pokreta. Može se učiniti još jednostavnijim.
- Pritisnite kombinaciju tipki Ctrl+U– otvara se novi prozor s izvornim kodom;
- Za ljubitelje kontekstnog izbornika: kliknite desni klik prijeđite mišem preko stranice i odaberite opciju “View page code”.
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. S njim se treba igrati, eksperimentirati, mijenjati i provjeriti rezultat. Možete čak početi sastavljanjem nekoliko uspješnih uzoraka. Kako urediti i spremiti izvorni kod?
Opcija 1. "Ručno"
Nakon što smo otvorili izvorni kod stranice, pozivamo kontekstni izbornik i odabiremo opciju “Spremi kao” te datoteku spremamo na HDD. Datoteku uređujemo u Notepadu ili Notepadu, spremamo promjene i otvaramo je putem preglednika. Rezultati naših promjena (uspješnih i manje uspješnih) prikazat će se u prozoru preglednika.
Opcija 2. Za profesionalce
Kada se svaki dan "igrate" s izvornim kodom, proces "spremi - otvori - promijeni - spremi - provjeri" postaje naporan. Za sebe sam pronašao rješenje u obliku instaliranja dodatka za Google Chrome - Firebug Lite. Omogućuje vam uređivanje i spremanje izvornog koda bez napuštanja prozora preglednika.
Svaki korisnik interneta ima svoje omiljene stranice na kojima troši Dugo vrijeme. 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čne elemente web-mjesta.
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 kao 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 napravio 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 pokažete na specifični kod popis - označit će element na 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 - 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 vrlo je široka, pa uzimamo jednu od riječi na web stranici preglednika Google Chrome. 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 pogledati 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
Stvoriti 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 dodajte “Backup” njenom nazivu tako da izgleda ovako: “Backup Default”.
- Sada, nakon ponovnog pokretanja preglednika Chrome, stvorit će se novi profil.
Uklanjamo zlonamjerni softver 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.
Veličina, boja nekih važni elementi blog - kao što je naslov bloga ili posta, oznaka more i slično. Traženi kod tražio sam ručno, eksperimentirajući s testnom domenom, na temelju koje je kasnije napisan članak.
I nedavno sam trebao promijeniti boju linkova. Probravši hrpu literature o ovom pitanju, shvatio sam jednostavna stvar: svi navode primjere iz vlastite predloške, ali svi imamo različite predloške i dobro je da je kod iz primjera barem malo sličan: ako ne kukaš, svejedno ću ga pronaći pretraživanjem - nasumično.
Broj nije funkcionirao s kodom veze. Svatko je pokazao potpuno različite putove. Pitao sam se postoji li jednostavan i točan alat, kako pronaći potreban kod html na bilo kojem mjestu. Mnogi blogeri, čak i s iskustvom, imaju poteškoća s manjim izmjenama predloška. U tome nema ništa loše, jer svatko ima svoje interese i ciljeve za izradu web stranice.
Ako želite napraviti male izmjene u predlošku, npr. promijeniti naslove, naslove članaka i odjeljaka, boju i veličinu fontova i poveznica, Obično je dovoljno naučiti jednostavan princip, o čemu se raspravlja u ovom članku. Ali postoje i složeni slučajevi koji zahtijevaju dublje učenje html-a i css, ili pomoć stručnjaka.
Jednog me dana poznanik zamolio da nađem gdje da promijenim boju ploče s kategorijama u njegovom predlošku. Učitao temu na testnu poddomenu. Postavke za ovaj element nisu bile pohranjene u style.css, već u drugoj datoteci, tako da ga osoba nije mogla pronaći.
Kako pronaći i promijeniti html i css kod stranice
Ako ne volite duge članke, ovo je za vas na kraju članka video vodič koji govori kako možete vidjeti html kod web stranice koristeći Notepad++ i napraviti promjene u dizajnu bilo kojeg predloška koristeći primjer kako promijeniti boju fonta. U videu postoje i druge suptilnosti rukovanja blogom. A za one kojima je bliži i jasniji tekst u nastavku detaljna analiza teme sa snimkama zaslona.
httpv://youtu.be/uIlVvwCt2ho
Pojmovi i pojmovi
Točnije bi bilo nasloviti članak “ Kako pronaći css kod “, ali odlučio sam se za „pogrešno” ime, jer se u osnovi odgovor na ovo pitanje nalazi u html-u. CSS i HTML su vrlo različite stvari, iako su dva dijela istog sustava. Na internetu postoji mnogo tehničkih članaka, ovdje će biti dovoljno da shvatimo da:
- HTML— odgovoran je za strukturu stranice (što slijedi nakon čega, kojim redoslijedom itd.). Ovo je osnova na kojoj je stranica kreirana. Ako ga usporedimo s kućom, onda je to njegov raspored, raspored prostorija.
- CSS— odgovoran je za dizajn (koji fontovi, veličine, boje itd.). Ovo je opći stil kuće i stil njegovih pojedinačnih soba: kakve će tapete biti, svjetiljke, zavjese, namještaj. Stoga dokument koji navodi css kodovi, pod nazivom "list stilova"
A ako se pitate kako promijeniti, primjerice, boju naslova stranice, veličinu fonta u tekstovima ili boju zaglavlja u bočnoj traci, onda sve to trebate potražiti u CSS style sheet-u. Ovo je jedino što vrijedi prvo razumjeti kako biste sami mogli mijenjati kod.
Volim složeno učiniti jednostavnim. Sjećam se davno, kada sam imao svoj prvi auto, bio je jako star, žice su bile trule, osigurači su često pucali, i svaki put sam ga vukao na servis. Zamislite koliko je novca bačeno, s obzirom na to samozamjena, kako se pokazalo, košta peni.
Jedan dan sam pogledao što majstor radi. Još uvijek ne znam kako radi osigurač. Ali znam gdje to promijeniti). Motor ne bih sam popravljao, a osigurač nije teško zamijeniti. Isto je i s web stranicama.
Ako ne želite postati programer, onda nema potrebe da imate duboko razumijevanje programiranja. Dovoljno je jasno da se razumije što je čemu namijenjeno, gdje to tražiti i kako to promijeniti. Bolje je da sami promijenite ono što možete, a sve ostalo prepustite stručnjacima. U članku o postoji koristan link o ovoj temi.
Trebate li biti stručnjak za sve?
Često se na SEO blogovima vode rasprave o tome treba li početnik dobro razumjeti HTML ili još bolje naučiti kako sam pisati web stranice kako bi sve bilo jedinstveno.. Pa ne znam - svakome svoje, a ovdje što je kome bliže, bliže je. Zanima me malo više, pa sada više učim od Vladimira. U studenom ove godine Vladimir je otvorio vlastiti blog. Njegov blog je napravljen na najjednostavniji način, besplatni predložak, samo ga je malo izmijenio kako bi sebi odgovarao.
Nakon 10 dana postojanja, blog je zauzeo 104. mjesto na ljestvici svih Runet stranica s prometom od oko 1,5 tisuća ljudi dnevno. Za 10 dana. Pa u čemu je stvar? Vladimir dobro poznaje HTML, može ga naručiti i kupiti za sebe jedinstveni predložak. Dakle, morate to razumjeti Tajna nije u predlošcima, već u korisnosti informacija.
Gdje je skriven html kod?
Oprostite na digresiji, vratimo se našim kodovima). Recimo da želite promijeniti boju fonta naslova svog bloga. Pogledajmo primjer mog testnog mjesta.
- Otvorite stranicu u pregledniku Google Chrome (ako ga još ne koristite, instalirajte ga - dobro je dizajniran za rad s web stranicama, ima puno ugrađenih alata).
- Prelazimo kursor miša preko elementa koji ćemo mijenjati . U u ovom slučaju- na naziv bloga. Kliknemo desnom tipkom miša na njega i u prozoru koji se pojavi odaberemo VIEW ELEMENT CODE.
VAŽNO: nemojte ovo brkati s PREGLEDOM KODA STRANICE! Sada nam ne treba cijela stranica, samo poseban element.
Kliknite na njega - na dnu preglednika pojavit će se prozor za pregled koda:
Linija koda koju mijenjamo označena je crvenom bojom.
Ali područje označeno plavom bojom sadrži ono što tražimo. Ovdje možete pronaći točan (ne približan) redak koda koji je odgovoran za fontove, boju, veličinu, isticanje itd. Na ovaj način možete saznati BILO KOD bilo kojeg elementa bilo kojeg predloška.
Pronađite željenu liniju u bloku označenom plavom bojom. S desne strane nalazi se klizač, možete se pomicati i pronaći liniju koja vam je potrebna.
Opće načelo gdje nešto tražiti:
Naziv fonta - u liniji FONT FAMILY
Veličina fonta - u retku VELIČINA FONTA
Boja fonta - u liniji COLOR
Ovdje su tri glavne linije u kojima se mijenja naziv, veličina i boja fonta bilo kojeg elementa. Točno u redu stil css Zadan je položaj retka u dokumentu. Ako trebate promijeniti neki drugi element (primjerice, trebate saznati gdje je linija na kojoj možete promijeniti boju trake izbornika ili boju poveznica), sve se radi potpuno isto.
PAŽNJA:
Linija koju ćemo kopirati označena je crvenom bojom na slici,
tako da ga kasnije možete pronaći u listu stilova.
4. Kopirajte liniju. Budući da u ovom primjeru želimo promijeniti boju naziva stranice, kopiram liniju istaknutu u crvenom pravokutniku na drugoj slici. U mom predlošku odgovoran je za promjenu boje naslova stranice:
#zaglavlje h1 a, #zaglavlje h1 a:posjećeno (
Pronađite traženi redak u datoteci “style sheet (style.css)”. To je već učinjeno u administratorskoj ploči. Hitno pitam, dok nema sigurnosti i potpuno razumijevanje, sve pokuse treba provesti na testnoj poddomeni kako bi se isključili .
Dakle, idite na admin panel: KONZOLA - IZGLED - UREĐIVAČ. Na desnoj bočnoj traci nalazimo datoteku STYLE TABLE (STYLE.CSS), otvorite je.
Sada otvorite traku za pretraživanje tipke CTRL+F: unutra gornji prozor Pojavit će se prazan redak-prozor. U njega zalijepimo liniju koju smo kopirali u koraku 4.
I vidjet ćete kako će ova linija biti istaknuta u listu stilova (na slici - naranča):
Izvršavamo promjenu elementa. U našem slučaju mijenjamo boju fonta, tako da u retku COLOR zamijenimo drugu vrijednost - boju koju želimo. U primjeru, boja je crna, a njeno značenje je:
Možete odabrati boju u bilo kojoj web usluzi palete boja: u tražilicu upišite “Web paleta boja” i odaberite onu koju želite. Odaberite boju i kopirajte je digitalna vrijednost i pažljivo zamijenite stari. nakon čega kliknemo UPDATE FILE i idemo vidjeti što se dogodilo.
Ako se promjene ne prikazuju, za proteklih sat vremena i ponovno idite na stranicu - ovaj put sve bi trebalo biti prikazano.
Dugo je potrebno opisati, ali u praksi se sve radi brzo, pogotovo kada se pojavi početna vještina.
Detaljnije, kako promijeniti određene elemente:
To je sve za danas, neću vas više gnjaviti šiframa. Nadam se da sada možete sami lako pronaći i promijeniti bilo koji element html kod, odnosno CSS kod - neka mi stručnjaci oproste što sam ga pojednostavio. A ako ne shvatite, svejedno posjetite stranicu. Ne gubite vrijeme na gluposti.
Predlažem da pogledate video Artema Abramovicha o tome kako pretraživati i pronaći bilo koju riječ ili element u bilo kojoj temi/predlošku, za bilo koji motor (wordpress, joomla, itd.) i zamijeniti ga onim što vam je potrebno:
Podijelite ako vam se svidjelo:
Možda će vas također zanimati:
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 se stranica može povezati CSS stilovi, koji set 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 promijeniti podatke na stranici, promijeniti tekst poruke ili napraviti lažni screenshot. 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.
Ctrl+U
Kako mogu vidjeti izvorni kod elementa?
Desnom tipkom miša kliknite element stranice koji vas zanima.
Google Chrome: “Prikaz koda elementa”
Opera: "Provjeri element"
Firefox: “Analiziraj element”
U drugim preglednicima potražite stavku izbornika sa sličnim značenjem.
Bok svima!
Posebno sam izložio cijelu poantu na početku članka, za one koji traže brz odgovor.
Informacija je možda poznata mnogima, ali budući da pišem za blogere početnike, web programere i druge tražitelje, ovaj referentni članak morate imati.
U budućnosti ćete svakako proučavati izvorni kod stranica i pojedinačnih elemenata.
Pogledajmo konkretan primjer kako možete koristiti gledanje izvornog koda stranice.
Na primjer, želimo vidjeti za koje se ključne riječi koriste određenu stranicu. Idemo na web stranicu koja nas zanima i pritisnemo Ctrl+U. U poseban prozor ili u zasebna kartica Otvorit će se izvorni kod ove stranice. Pritisnite Ctrl+F za traženje isječka koda. U ovom slučaju upisujemo riječ " ključne riječi". Automatski ćete biti preusmjereni na dio koda s ovom meta oznakom, a tražena riječ bit će istaknuta.
Po analogiji, možete pretraživati i proučavati druge fragmente koda.
Pregledavanje cijelog izvornog koda stranice u većini slučajeva nije baš zgodno, stoga je moguće vidjeti kod u svim preglednicima pojedinačni element ili fragment.
Upotrijebimo konkretan primjer pregleda koda elementa. Na primjer, da vidimo ima li poveznica nofollow atribut. Kliknite desnom tipkom miša na link koji nas zanima i na padajućem izborniku kontekstni izbornik lijevi klik na stavku “Prikaz koda elementa” ili slično (ovisno o vašem pregledniku). Ispod, u posebnom prozoru za analizu koda, dobivamo nešto slično.
Vidimo da kod veze sadrži rel=”nofollow” . To znači da PR neće “curiti” 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.
