Za dugo vremena za mene je opcija "prikaži izvor stranica" bio beskorisan i nezanimljiv. Do sada učenje HTML-a na Codecademy-u i dizajniranje vlastitih web stranica nije preraslo u moj novi hobi. Ovdje se postavilo pitanje: gdje pronaći stvarni slučajevi i pozajmiti zanimljiva rješenja za tvoju kasicu-prasicu? Odgovor je bio neočekivano jednostavan, kao i sve genijalne stvari: pogledajte izvorni kod stranice u google chrome! Dijelim sa vama svoje skromne nalaze.
Koji je izvorni kod stranice
Ako i vi, poput mene, tek radite prve korake u HTML programiranju, bilo bi dobro da saznate 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, tabele) i oznake. Potonje djeluju kao upute za pretraživač: kako prikazati sadržaj, koju 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 špijuniramo je, sačuvamo 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, mene je zanimao dizajn menija stranice. Otvoreni izvorni kod na Google pretraživač Chrome se može uraditi na tri načina:
- Kliknite na ikonu meni u desno gornji ugao pretraživač i odaberite " Dodatni alati" Između ostalog, postoji i opcija „Prikaži izvorni kod“. Iskreno, rijetko ga koristim ovu metodu: puno nepotrebnih pokreta. Može se učiniti još jednostavnijim.
- Pritisnite kombinaciju tastera Ctrl+U– otvara se novi prozor sa izvornim kodom;
- Za ljubitelje kontekstnog menija: kliknite desni klik prijeđite mišem preko stranice i odaberite opciju "Prikaži kod stranice".
Mi smo se nosili sa zadatkom pregleda HTML koda stranice u pretraživaču. Pređimo 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, pozovite kontekstni meni i odaberite opciju “Sačuvaj kao” i sačuvajte datoteku na HDD. Datoteku uredimo u Notepad-u ili Notepad-u, pohranimo promjene i otvorimo je putem pretraživača. Rezultati naših promjena (uspješnih i ne tako uspješnih) ć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" postaje naporan. Za sebe sam pronašao rješenje u vidu instaliranja dodatka za Google Chrome - Firebug Lite. Omogućava vam da uređujete i čuvate izvorni kod bez napuštanja prozora pretraživača.
Svaki korisnik interneta ima svoje omiljene stranice na kojima troši dugo vrijeme. I samo lijeni nisu pomislili da pogledaju kako je nastala i od čega se sastoji. Nemoguće je odgovoriti na sva ova pitanja, jer postoji mnogo načina za kreiranje web stranice, ali pogledati komande i kodove koji ga čine moguće je i javno dostupno svima.
Drugo je pitanje da li će osoba koja se ne bavi programiranjem razumjeti bilo koji od simbola koji čine kod. Ali iz primjera koji će biti dati u nastavku, bilo koji Google korisnik Chrome će moći vidjeti pojedinačne elemente web lokacija.
Kako pogledati izvorni kod html stranice u Google pretraživaču
Da biste mogli vidjeti kod stranice u Chromeu, potrebno je da odete na stranicu koja vas zanima i izvršite sljedeće korake:
Ove dvije stavke se razlikuju po svojoj funkcionalnosti i informacijama 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 “View Code”, a u kojim “View Page Code” u Google Chrome pretraživaču.
Ali objašnjavajući za prosječnog korisnika, ove funkcije se mogu podijeliti u sljedeće svrhe:
- „Prikaži šifru stranice“ je potrebno samo da vidite glavnu kombinaciju stranice. U osnovi, ovo je struktura stranice (bez dodatni modeli as CSS fajlovi i drugi dodaci koji su ostali u folderu kreatora stranice). Ova struktura nije pogodno za kreiranje vlastitu stranicu“copy-paste”, ali će vam omogućiti da vidite šta je tačno programer uradio i kojim redosledom da bi sajt u Google Chrome pretraživaču imao takav eksterni dizajn.
- “Prikaži kod” prikazuje detaljnu strukturu, naglašavajući sve oblasti koje su pogođene 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 ovo nije ništa manje korisna funkcija.
- „Prikaz koda“ je promjenjiv i možete uređivati bilo koji element na način koji vam odgovara. Naravno, sve ove promjene će “živjeti” dok se stranica ne osvježi, ali ponekad je zabavno proći kroz te postavke i jednostavno shvatiti zašto je potrebna ova ili ona vrijednost i šta će se dogoditi ako je promijenite. Ne treba pretpostaviti da ćete takvim radnjama naštetiti sebi ili web stranici - ove promjene utječu samo na kod vašeg Google Chromea i ne idu na internet.
Razmatramo pitanje kako vidjeti kod elementa
Ako bismo odgovorili na takvo pitanje, onda je jedina opcija koja se nameće samo primjer. Jer u jednom članku je jako teško postati osoba koja se razumije u ovu temu (web developer), ali pokazati na primjeru da se pitanje riješi puno je lakše.
Funkcionalnost koda elementa je vrlo široka, pa uzimamo jednu od riječi na web stranici preglednika Google Chrome. Hteli smo da razmotrimo šta ključne riječi(u kodu će biti napisano kao “ključne riječi”) korišteni su 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 da odgovarate na pitanje kako gledati na 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 sajta počevši od zaglavlja (“zaglavlje sajta”) i završavajući sa end (poslednja komanda bilo kog 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 nikako nije konačan spisak. Ali treba podsjetiti da bez posebnog znanja možete "pročitati" kod Google stranice Chrome je gotovo nemoguć i dobijeni podaci prosječnom korisniku praktično nije potrebno.
Stavka “Prikaži šifru elementa” ne radi
Treba odmah reći da će svaka stranica imati 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 generiše 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 se i ovo može dogoditi).
Popravljanje oštećenog korisničkog profila
Stvoriti novi profil, potrebno je da uklonite stari sa svog računara. Da bismo to uradili radimo sledeće:
- Zatvorite Google Chrome i pokrenite ugrađeni Windows pretraživač Explorer.
- Uđi adresna traka sljedeću naredbu: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Kada se direktorij otvori, potražite folder “Default” i dodajte “Backup” u njegovo ime tako da izgleda ovako: “Backup Default”.
- Sada, nakon ponovnog pokretanja Chrome pretraživača, kreirat će se novi profil.
Uklanjamo zlonamjerni softver ili njegove ostatke
Ako nam novi profil ne daje pristup kodu elementa stranice i još uvijek vidimo grešku, trebali bismo učiniti sljedeće:
- Otvorite komandnu liniju Windows string(“Pokreni”) i tamo unesite komandu “cmd”.
- Unesite sljedeću naredbu u red: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
- Nakon što potvrdite radnju, unesite ovo: RD /S /Q “%WinDir%\System32\GroupPolicy”.
- Sada “gpupdate /force” (bez navodnika).
Ako je sve urađeno kako treba, onda nakon ponovnog pokretanja Google kompjuter Chrome će otvoriti kod elemenata i pretraživač će raditi normalno.
Veličina, boja nekih važnih elemenata blog - kao što je naslov bloga ili posta, oznaka više i slično. Traženi kod sam tražio ručno, eksperimentišući sa test domenom, na osnovu koje je kasnije napisan članak.
A nedavno sam morao promijeniti boju linkova. Pregledavši gomilu literature o ovom pitanju, shvatio sam jednostavna stvar: svi daju primjere iz vlastiti šabloni, ali svi imamo različite šablone i dobro je ako je kod iz primjera barem malo sličan: ako ne kukate, ja ću ga ipak pronaći pretraživanjem - nasumično.
Broj nije funkcionirao s kodom veze. Svi su pokazivali potpuno različite puteve. Pitao sam se da li postoji jednostavan i precizan alat, kako pronaći potreban kod html na bilo kojoj stranici. Mnogi blogeri, čak i sa iskustvom, imaju poteškoća u manjim modifikacijama šablona. U tome nema ništa loše, jer svako ima svoje interese i ciljeve za kreiranje web stranice.
Ako želite napraviti male promjene u šablonu, npr. promijeniti bilo koji naslov, naslov članaka i odjeljaka, boju i veličinu fontova i linkova, Obično je dovoljno naučiti jednostavan princip, o čemu se govori u ovom članku. Ali postoje i složeni slučajevi koji zahtijevaju dublje učenje html-a i css, ili pomoć stručnjaka.
Jednog dana me poznanik zamolio da pronađem gdje da promijenim boju panela kategorija u njegovom šablonu. Otpremljena tema na testnu poddomenu. Postavke za ovaj element nisu pohranjene u style.css, već u drugom fajlu, tako da ga osoba nije mogla pronaći.
Kako pronaći i promijeniti html i css kod stranice
Ako ne volite dugačke članke, ovo je za vas na kraju članka video tutorijal 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 tekst bliži i jasniji, u nastavku detaljna analiza teme sa snimcima ekrana.
httpv://youtu.be/uIlVvwCt2ho
Termini i koncepti
Tačnije bi bilo nasloviti članak “ Kako pronaći css kod “, ali sam odlučio da idem s “pogrešnim” imenom, jer se u osnovi odgovor na ovo pitanje nalazi u html-u. CSS i HTML su veoma različite stvari, iako su dva dela istog sistema. Na internetu postoji mnogo tehničkih članaka, ovdje će nam biti dovoljno da shvatimo da:
- HTML— odgovoran je za strukturu stranice (šta slijedi šta, kojim redoslijedom itd.). Ovo je osnova na kojoj je sajt kreiran. Ako je uporedimo sa kućom, onda je ovo njen raspored, raspored prostorija.
- CSS— odgovoran je za dizajn (koji fontovi, veličine, boje itd.). Ovo je opći stil kuće i stil njenih pojedinačnih prostorija: kakve će tapete biti, lampe, zavjese, namještaj. Dakle, dokument koji navodi css kodovi, pod nazivom "style sheet"
A ako se pitate kako promijeniti, na primjer, boju naslova stranice, veličinu fonta u tekstovima ili boju zaglavlja na bočnoj traci, onda morate sve to potražiti u CSS stilu. Ovo je jedina stvar koju prvo vrijedi razumjeti kako biste sami izvršili promjene u kodu.
Volim da kompleks činim jednostavnim. Sećam se davno, kada sam imao svoj prvi auto, bio je veoma star, žice su bile pokvarene, osigurači su često pregoreli i svaki put sam ga vukao u servis. Zamislite koliko je novca bačeno, s obzirom na to samozamjena, kako se ispostavilo, košta peni.
Jednog dana sam pogledao šta tačno majstor radi. Još uvijek ne znam kako radi osigurač. Ali znam gde da ga promenim). Ne bih sam popravljao motor, a nije teško zamijeniti osigurač. Isto je i sa web stranicama.
Ako ne želite da postanete programer, onda nema potrebe da imate duboko razumevanje programiranja. Dovoljno je jasno da se razume šta je za šta namenjeno, gde to tražiti i kako to promeniti. Bolje je promijeniti ono što možete sami, a sve ostalo prepustite stručnjacima. U članku o postoji korisna veza o ovoj temi.
Trebate li biti stručnjak za sve?
Često se na SEO blogovima vode rasprave o tome da li početnik treba da ima dublje razumijevanje HTML-a, ili još bolje da nauči kako sami pisati web stranice da sve bude jedinstveno.. Pa ne znam - svakom svoje, a evo šta je kome bliže je bliže. Zanima me malo više, pa sada učim više od Vladimira. U novembru ove godine Vladimir je otvorio svoj blog. Njegov blog je napravljen na najjednostavniji način, besplatni šablon, samo ga je malo promijenio kako bi sebi odgovarao.
Nakon 10 dana postojanja, blog je zauzeo 104. mjesto na ljestvici svih Runet stranica sa prometom od oko 1,5 hiljada ljudi dnevno. Za 10 dana. U čemu je stvar? Vladimir je dobro upućen u HTML, može sam naručiti i kupiti jedinstveni šablon. Morate to shvatiti Tajna nije u šablonima, već u korisnosti informacija.
Gdje je skriven html kod?
Oprostite na digresiji, vratimo se našim kodovima). Recimo da želite promijeniti boju fonta naslova vašeg bloga. Pogledajmo primjer mog testnog mjesta.
- Otvorite stranicu u pregledniku Google Chrome (ako ga još ne koristite, instalirajte ga - dobro je dizajniran za rad sa web stranicama, ima puno ugrađenih alata).
- Pomeramo kursor miša preko elementa koji ćemo promeniti . IN u ovom slučaju- na naziv bloga. Desnom tipkom miša kliknemo na njega i u prozoru koji se pojavi izaberemo PRIKAZ KOD ELEMENTA.
VAŽNO: nemojte ovo brkati sa PREGLEDOM KODOVA STRANICE! Sada nam ne treba cijela stranica, samo poseban element.
Kliknite na njega - na dnu pretraživača će se pojaviti prozor za pregled koda:
Red koda koji mijenjamo je označen crvenom bojom.
Ali područje označeno plavom bojom sadrži ono što tražimo. Ovdje možete pronaći tačnu (ne približnu) liniju koda odgovornu za fontove, boju, veličinu, isticanje itd. Na ovaj način možete saznati BILO KOJI kod bilo kojeg elementa bilo kojeg predloška.
Pronađite željenu liniju u bloku označenom plavom bojom. Sa desne strane se nalazi klizač, možete se pomicati i pronaći liniju koja vam je potrebna.
Opšti princip gdje potražiti nešto:
Naziv fonta - u liniji FONT FAMILY
Veličina fonta - u liniji FONT SIZE
Boja fonta - u liniji COLOR
Evo tri glavne linije u kojima se mijenja naziv, veličina i boja fonta bilo kojeg elementa. Pravo u redu stil css Dat je položaj linije u dokumentu. Ako treba da promenite neki drugi element (na primer, morate da saznate gde se nalazi linija gde možete promeniti boju meni bara ili boju linkova), sve se radi potpuno isto.
PAŽNJA:
Linija koju ćemo kopirati je na slici označena crvenom bojom,
tako da ga kasnije možete pronaći u listi stilova.
4. Kopirajte liniju. Pošto u ovom primeru želimo da promenimo boju naziva sajta, kopiram liniju označenu crvenim pravougaonikom na drugoj slici. U mom predlošku, odgovoran je za promjenu boje naslova stranice:
#header h1 a, #header h1 a:visited (
Pronađite potrebnu liniju u datoteci “style sheet (style.css)”. Ovo je već urađeno u admin panelu. Hitno pitam, dok nema sigurnosti i puno razumijevanje, sve eksperimente treba izvesti na testnoj poddomeni kako bi se isključili .
Dakle, idite na admin panel: KONZOLA - IZGLED - UREDNIK. U desnoj bočnoj traci nalazimo fajl STYLE TABLE (STYLE.CSS), otvorimo ga.
Sada otvorite traku za pretraživanje CTRL tasteri+F: u gornji prozor Pojavit će se prazan linijski prozor. U njega zalijepimo liniju koju smo kopirali u koraku 4.
I vidjet ćete kako će ova linija biti istaknuta u stilu (na slici - narandžasta):
Vršimo promjenu elementa. U našem slučaju mijenjamo boju fonta, tako da u liniji BOJA zamjenjujemo drugu vrijednost - boju koju želimo. U primjeru, boja je crna, njeno značenje je:
Možete odabrati boju u bilo kojoj usluzi web palete boja: upišite “Web paleta boja” u tražilicu i odaberite onu koju želite. Odaberite boju i kopirajte je digitalna vrijednost i pažljivo zamijenite stari. nakon čega kliknemo UPDATE FILE i idemo da vidimo šta se dogodilo.
Ako se promjene ne prikažu, za prošli sat i ponovo idite na stranicu - ovaj put bi sve trebalo biti prikazano.
Dugo se opisuje, 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 lako možete sami 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, ipak posjetite stranicu. Ne gubite vrijeme na gluposti.
Predlažem da pogledate video Artema Abramoviča o tome kako pretražiti 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 treba:
Molimo podijelite ako vam se svidjelo:
Možda će vas zanimati i sljedeće:
Vještina promijenite izvorni kod stranice – korisna vještina za napredne korisnike interneta. Zamjenom HTML koda možete promijeniti otvori web stranicu kako hoćeš. 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 jezika HTML markup. 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. Stranica se također može povezati CSS stilovi, koji je postavljen izgled elementi 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 početna stranica u Google Chromeu. 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.
Ctrl+U
Kako mogu vidjeti izvorni kod elementa?
Desni klik na element stranice od interesa.
Google chrome: “Pogledaj 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.
Hajde da pogledamo konkretan primjer kako možete koristiti pregled izvornog koda stranice.
Na primjer, želimo vidjeti za šta se koriste ključne riječi određena stranica. Idemo na web stranicu koja nas zanima i pritisnemo Ctrl+U. IN poseban prozor ili u odvojena kartica Otvoriće se izvorni kod ove stranice. 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 cijelog izvornog koda stranice nije baš zgodno u većini slučajeva, tako da je moguće vidjeti kod u svim pretraživačima pojedinačni element ili fragment.
Upotrijebimo konkretan primjer gledanja koda elementa. Na primjer, da vidimo ima li veza nofollow atribut. Desni klik na link koji nas zanima i u padajućem izborniku kontekstni meni levi klik na stavku “Pogledaj 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.
