Veličina, boja nekih važnih elemenata bloga, kao što su naslov bloga ili posta, oznaka više i slično. Potreban kod sam tražio ručno, eksperimentišući sa test domenom, na osnovu koje je kasnije napisan članak.
A nedavno je trebalo promijeniti boju veza. Prebacivši gomilu literature o ovoj temi, shvatio sam jednostavnu stvar: svako daje primjere iz svojih šablona, ali svi imamo različite šablone i dobro je ako je kod iz primjera barem malo sličan: ne kukati, pa ću ga ipak pronaći kotrljajući - metodom poke.
Broj nije prošao sa kodom veze. Svi su ukazivali na potpuno različite puteve. Pitao sam se da li postoji jednostavan i precizan instrument, kako pronaći pravi html kod na bilo kojoj stranici. Mnogim blogerima, čak i sa iskustvom, je teško malo modificirati predložak. Nema razloga za brigu, jer svako ima svoje interese i ciljeve za kreiranje sajta.
Ako želite napraviti male promjene u šablonu kao promijeniti bilo koji naslov, naslov članaka i naslova, 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 ili dublje proučavanje html-a i css-a ili pomoć stručnjaka.
Jednog dana, prijatelj me zamolio da pronađem gdje da promijenim boju ploče naslova u njegovom predlošku. 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 pokazuje kako možete vidjeti html kod stranice pomoću Notepad ++ i napraviti promjene u dizajnu bilo kojeg predloška koristeći primjer kako promijeniti boju fonta. Postoje i druge suptilnosti bavljenja blogom u videu. A za one kojima je tekst bliži i razumljiviji, u nastavku je 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 se zaustavim na “pogrešnom” imenu, jer se u osnovi odgovor na ovo pitanje traži u html-u. CSS i HTML su veoma različite stvari, iako su dva dela istog sistema. Postoji mnogo tehničkih članaka na internetu, biće nam dovoljno da shvatimo da:
- HTML- odgovorni za strukturu stranice (šta slijedi šta, kojim redoslijedom itd.). Ovo je temelj na kojem je izgrađena lokacija. Ako je uporedimo sa kućom, onda je ovo njen raspored, raspored prostorija.
- css- odgovoran za dizajn (koji fontovi, veličine, boje itd.). Ovo je opći stil kuće i stil njenih pojedinačnih prostorija: kakve će biti tapete, lampe, zavjese, namještaj. Dakle, dokument koji propisuje css kodovi, nazvan "style sheet"
A ako ste se pitali kako promijeniti, na primjer, boju zaglavlja web-mjesta, veličinu fonta u tekstovima ili boju naslova na bočnoj traci, onda morate sve to potražiti u CSS stilu. Ovo je jedina stvar koju vrijedi razumjeti za početak kako biste sami unijeli promjene u kodu.
Volim da pretvaram složeno u jednostavno. Sećam se davno, kada sam imao svoj prvi auto, veoma star, žice su bile pokvarene, osigurači su često pregoreli i svaki put sam ga vukao do servisa na šlepu. Zamislite koliko je novca bačeno, uprkos činjenici da nezavisna zamjena, kako se ispostavilo, košta peni.
Jednom 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 duboko razumete programiranje. Dovoljno je jasno razumjeti šta je čemu namijenjeno, gdje to tražiti i kako to promijeniti. Bolje je promijeniti ono što možete sami, a sve ostalo prepustite stručnjacima. Članak o ima korisnu vezu na ovu temu.
Trebate li biti stručnjak za sve?
U seo blogovima se često vode rasprave o tome da li početnik treba duboko da razumije html ili još bolje da nauči sam da piše sajtove da sve bude jedinstveno.. Pa ne znam - svakom svoje, i ovde je neko bliži. Zanima me malo više, pa sad dodatno učim sa Vladimirom. U novembru ove godine Vladimir je otvorio svoj blog. Njegov blog je napravljen na najjednostavnijem, besplatnom šablonu, samo ga je malo modificirao za sebe.
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. Pa šta je bilo? Vladimir je dobro upućen u html, može naručiti i kupiti jedinstveni šablon za sebe. Ovdje morate to shvatiti tajna nije u obrascima, već u korisnosti informacija.
Gdje se krije html kod?
Oprostite na digresiji, vratimo se našim kodovima). Recimo da želite promijeniti boju fonta naslova bloga. Razmotrit ćemo primjer mog testnog mjesta.
- Otvaranje stranice u pregledniku Google Chrome (ako ga još ne koristite, instalirajte ga - dobro je izoštren za rad sa web stranicama, ima puno ugrađenih alata).
- Pomerite kursor miša preko elementa koji želite da promenite . U ovom slučaju, naslov bloga. Kliknemo na njega "desnim" mišem i u prozoru koji se pojavi odaberite PRIKAZ KOD ELEMENTA.
VAŽNO: nemojte brkati sa PREGLED KODOVA STRANICE! Sada nam ne treba cijela stranica, samo poseban element.
Kliknemo na njega - na dnu preglednika pojavljuje se 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 i još mnogo toga. Na ovaj način možete saznati BILO KOJI kod bilo kojeg elementa bilo kojeg šablona.
Pronalazimo željenu liniju u bloku označenom plavom bojom. Na desnoj strani se nalazi klizač kroz koji možete skrolovati i pronaći željenu liniju.
Opšti princip, gde se šta traži:
Naziv fonta - u redu FONT FAMILY
Veličina fonta - u liniji FONT SIZE
Boja fonta - u liniji COLOR
Evo tri glavne linije koje mijenjaju naziv, veličinu i boju fonta bilo kojeg elementa. Sa desne strane, stil css linija daje poziciju linije u dokumentu. Ako trebate promijeniti neki drugi element (na primjer, morate saznati gdje se nalazi linija, u kojoj možete promijeniti boju trake menija ili boju linkova), sve se radi na potpuno isti način .
PAŽNJA:
linija koju ćemo kopirati je na slici označena crvenom bojom,
da biste ga kasnije pronašli u tabeli sa stilovima.
4. Kopirajte liniju. Pošto u ovom primjeru želimo promijeniti boju naziva stranice, kopiram liniju označenu na drugoj slici crvenim pravokutnikom. U mom predlošku, ona je odgovorna za promjenu boje naziva stranice:
#header h1 a, #header h1 a:visited (
Pronalazimo željeni red u datoteci "style sheet (style.css)". Ovo je već urađeno u adminu. Pozivam vas da, dok ne postoji povjerenje i potpuno razumijevanje, provodite sve eksperimente na testnoj poddomenu kako biste isključili .
Dakle, idite na admin panel: KONZOLA - IZGLED - UREDNIK. U desnoj bočnoj traci nalazimo datoteku STYLE TABLE (STYLE.CSS), otvorite je.
Sada otvaramo traku za pretraživanje pomoću tipki CTRL + F: u gornjem prozoru će se pojaviti prazan prozor. Zalijepite u njega red koji ste kopirali u koraku 4.
I vidjet ćete kako je ova linija istaknuta u tablici stilova (na slici - narančastom):
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 u tražilicu "Web paleta boja" i odaberite onu koju želite. Odaberemo boju, kopiramo njenu digitalnu vrijednost i pažljivo je zamijenimo starom. zatim kliknite UPDATE FILE i idite da vidite š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.
Ovo se dugo 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 mučiti šiframa. Nadam se da ćete sada sami moći lako pronaći i promijeniti bilo koji element html koda, odnosno css koda - da, stručnjaci će mi oprostiti što sam pojednostavio. A ako ne razumijete, 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 je potrebno:
Molimo podijelite ako vam se sviđa:
Možda će vas zanimati i sljedeće:
1 glas Dobar dan dragi čitaoci mog bloga. Ponekad na stranici nađete neku lijepu funkciju i pitanje počinje da muči kako je kreator postigao tako zanimljiv efekat.
Ispostavilo se da je odgovor prilično lak. A ako imate neke vještine, možete prikupiti mnogo takvih čipova i kreirati vlastitu jedinstvenu web stranicu za kratko vrijeme.
Danas ćemo razgovarati o tome kako otvoriti kod stranice, određeni element i naučiti kako iskoristiti ovu vještinu u svoju korist.
Osnovno znanje o kodu
Moj sajt je namenjen početnicima i prvo bih želeo da ukratko govorim o sajtovima i kodu uopšte.
Da nacrtate sliku, a zatim je izrežite na male komadiće, napišite kod, zahvaljujući kojem će preglednik ponovo sakupiti sve elemente u jednu cjelinu. Čini se da je sve veoma komplikovano, zar ne? Nikako, i nije vrijedno brige o tome.
Tako se grade kvalitetne web stranice. Ako hoćeš - uđi u ovaj posao i uči, nema želje - niko te ne može natjerati.
Reći ću samo jedno... nema ništa ugodnije nego vidjeti kako se nerazumljive riječi koje ste napisali pretvaraju u jedinstvenu cjelinu i oživljavaju: linkovi rade, dugmad se pomiče, slike pomiču, tekst puzi. Mislim da znam kako se Viktor Frankenštajn osećao.
Kada počnete da shvaćate tajni jezik i vidite da je sve zapravo mnogo jednostavnije nego što se u početku činilo, ne možete a da ne vjerujete u vlastite moći i mogućnosti mozga. Veoma je kul.
Kako se prave web stranice? Idealno, prvo. On samo slika sliku. Na primjer, kao što je prikazano na donjoj slici. Za sada je ovo samo slika, fotografija. Nijedna veza ne radi, kada kliknete ne idete nikuda, pretraga se ne vrši.
Prema ovom crtežu. Pogledajte snimak ekrana ispod. Možda mislite da je ovo smiješan i vrlo složen skup likova. Zapravo, sve nije tako teško, postoji određeni algoritam.
Postoji samo oko 150 oznaka i svaki od njih je odgovoran za određenu radnju: link, transfer, bold, boja, naslov itd. Razumjeti ih nije tako teško ako imate želju i ne smeta vam vrijeme.
Zahvaljujući poznavanju ovih atributa, gotovo svaki problem se može riješiti. Evo samo načina za postizanje cilja, svaki programer pronalazi svoj.
Iskusni kreatori odmah vide kako postići rezultate, dok drugi moraju razmišljati, tražiti odgovor u člancima ili u izvornom kodu konkurenata. Oni jednostavno uzimaju potrebnu ulogu na web-stranici treće strane i uređuju je za sebe. Ovo značajno skraćuje proces rada.
Malo kasnije pokazaću vam konkretan primjer.
Pogledaj kod
Dakle, dozvolite mi da vam prvo pokažem kako da postupite ako trebate naučiti tuđi html. Zatim ćemo detaljnije razmotriti sva ostala pitanja.
Najbolji način
Metoda koju ću prvo opisati je malo komplikovana za početnike, ali kao uvod, čitajte dalje. Otvorite stranicu i kliknite na desnu tipku miša. Odaberite "Sačuvaj kao..."
Sačuvajte cijelu web stranicu. Kao što možete vidjeti na snimku ekrana, sve sam već preuzeo unaprijed. Ovdje imamo dva foldera.
Sve što vam treba je ovdje. Svaki element. Ako ovo shvatite, možete brzo dobiti sve što vam je potrebno. Ali, takav zadatak postaje sve više nemoguć. Preuzimanje nije izvršeno. Šta učiniti ako je zabranjeno kopiranje stranice?
To je Google Chrome
Kao što ste možda primijetili, najčešće koristim Google Chrome i lako je prepoznati tuđi kod u ovom pretraživaču. Kao u principu i u svakom drugom. Shema neće biti slična, već identična. Otvaramo stranicu čiji kod želimo da saznamo i kliknemo bilo gde desnim tasterom miša. U prozoru koji se pojavi kliknite na "Prikaži kod stranice".
List koda će se otvoriti u novom prozoru, što je početniku prilično teško razumjeti. Ali, nemojte se plašiti unapred.
Ako trebate znati šifru samo jednog elementa, samo zadržite pokazivač miša preko njega i kliknite desnim tasterom miša. Odabiremo drugu hromiranu funkciju: "Prikaži kod elementa".
Na primjer, možda bi me zanimalo kako je napravljen logo, koristeći sliku ili programski jezik? Na kraju krajeva, možete nacrtati kvadrat koristeći css. Mnogi stručnjaci savjetuju pisanje što više informacija u kodu. A kako funkcioniraju popularne stranice?
Evo informacija koje su vam potrebne. Gornji html, donji css. Ovo su dva jezika. Prvi je odgovoran za tekstualnu komponentu, a drugi za dizajn. Da nije postojao css, onda biste morali svaki put propisati boju, veličinu fonta. Za svaku stranicu je veoma dugačak. Ali da nema html-a, onda ne bismo imali tekstove. Grubo objašnjeno, ali generalno, sve je tako.
Inače, ako vas zanima kako to funkcionira ovdje, možete vidjeti link do slike ispod. Evo tvog odgovora.
Mozilla Firefox
Ako volite da radite u njuškici, onda će sve biti potpuno isto. Otvorite stranicu i kliknite na desnu tipku miša. "Izvorni kod stranice" ako želite vidjeti cijeli kod.
Kada zadržite pokazivač iznad elementa, možete otvoriti njegov kod.
Ovdje su podaci prikazani na dnu ekrana, ali sve ostalo je potpuno isto.
Yandex pretraživač
U Yandex pretraživaču sve je potpuno isto kao u prethodne dvije opcije, otvorite stranicu, kliknite desnim tasterom miša, pogledajte kod stranice.
Prelazimo preko elementa ako želimo da saznamo tačno njegov kod.
Ovdje je sve prikazano na isti način kao u hromu.
Opera
I konačno, Opera.
Usput, možda ste primijetili da nije potrebno koristiti miš. Za otvaranje koda postoji brza prečica na tastaturi i ista je za sve pretraživače: CTRL+U.
Za elemente: Ctrl+Shift+C.
Ovako izgleda rezultat.
Biće zanimljivo za početnike
Sada pogledajte kako sve funkcionira. Nađete sajt i zaista vam se sviđa neki element. Na primjer, ovaj. Već znate kako otvoriti kod elementa.
Sad kopiraj.
Koristim , nalijepim ovaj kod u novu html datoteku, u body tag (body na engleskom).
Sada da vidimo kako sve to izgleda u pretraživaču.
Spreman. Da bi se tekst poravnao po ivicama i dobio zelenkastu boju potrebno je da povežete css sa ovim dokumentom i kopirate još jedan kod sa sajta sa kojeg smo ovaj ukrali.
Sada to neću učiniti. Potrebno je više vremena: i moje i tvoje. Mislim da ću sve detalje opisati u svojim budućim publikacijama. Pretplatite se na newsletter i budite prvi koji će saznati kada se članak pojavi.
Ako ne možete izdržati, ali želite da naučite više o html-u i css-u upravo sada, onda vam tradicionalno mogu preporučiti besplatne kurseve obuke.
Evo 33 lekcije koje će vam omogućiti da savladate html - "Besplatni HTML kurs" .
A evo i kompletnih informacija o css-u - "Besplatni CSS kurs (45 video lekcija!)" .
Sada znate malo više. Želim vam uspjeh u vašim nastojanjima. Vidimo se uskoro!
Svaki korisnik interneta ima svoje omiljene stranice na kojima provodi dugo vremena. 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 pitanje je da li će osoba koja se ne bavi programiranjem razumjeti neke od simbola koji čine kod. Ali iz primjera koji će biti prikazani u nastavku, svaki korisnik Google Chrome-a će moći vidjeti pojedinačne elemente web lokacija.
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 “View Code” a u kojim “View Page Code” 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 da biste vidjeli glavnu kombinaciju stranice. U osnovi, ovo je struktura sajta (bez dodatnih modela u obliku CSS fajlova i drugih dodataka koji su ostali u folderu kreatora sajta). Ova struktura nije prikladna za kreiranje vlastite stranice copy-pastingom, ali će vam omogućiti da vidite šta je tačno programer uradio i kojim redosledom, tako da je 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 zadržite pokazivač miša iznad određenog koda liste, on će označiti stavku na web lokaciji kojoj pripada.
- Pregledanje koda stranice otvara se u posebnom pretraživaču bez mogućnosti 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 proći 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 web 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 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 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 linkove 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 je bez posebnog znanja gotovo nemoguće "pročitati" kod Google Chrome stranice, a primljeni podaci praktički nisu potrebni običnom korisniku.
Stavka "Prikaži šifru elementa" ne radi
Odmah treba reći da će svaka stranica imati otvoren pristup kodovima elemenata. Odnosno, č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
Da biste kreirali novi profil, morate ukloniti stari sa svog računara. Da biste to učinili, učinite sljedeće:
- Zatvorite Google Chrome i pokrenite ugrađeni pretraživač Windows Explorer.
- Unesite sljedeću naredbu u adresnu traku: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Kada se direktorij otvori, potražite folder “Default” i dodajte “Backup” u njegovo ime da 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:
- Otvorite Windows komandnu liniju (Pokreni) i upišite "cmd" u nju.
- 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, nakon ponovnog pokretanja računara, Google Chrome će otvoriti kod elemenata i preglednik će raditi normalno.
Ctrl+U
Kako vidjeti izvorni kod elementa?
Kliknite desnim dugmetom miša na element stranice od interesa.
Google chrome : “Pogledaj kod elementa”
Opera : "Istraži element"
Firefox: “Analiziraj element”
U drugim pretraživačima potražite sličnu stavku menija.
Zdravo svima!
Posebno sam na početku članka iznio cijelu poentu, za one koji traže brzi odgovor.
Informacije su možda poznate mnogima, ali budući da pišem za blogere početnike, web programere i druge istraživače, ovaj članak pomoći mora biti prisutan.
U budućnosti ćete svakako proučavati izvorni kod stranica i pojedinačnih elemenata.
Pogledajmo konkretan primjer kako možete koristiti prikaz izvora stranice.
Na primjer, želimo vidjeti koje se ključne riječi koriste za određenu stranicu. Idemo na web stranicu koja nas zanima i pritisnemo Ctrl + U. Izvorni kod ove stranice će se otvoriti u posebnom prozoru ili na posebnoj kartici. Pritisnite Ctrl+F za traženje dijela koda. U ovom slučaju u polje za pretragu upisujemo riječ “ ključne riječi". Automatski ćete biti preusmjereni na isječak koda s ovom meta oznakom i riječ za pretraživanje će biti istaknuta.
Po analogiji, možete pretraživati i proučavati druge isječke koda.
Pregledanje cjelokupnog izvornog koda stranice u većini slučajeva nije baš zgodno, pa je u svim pretraživačima moguće vidjeti kod jednog elementa ili fragmenta.
Koristimo konkretan primjer da vidimo kod elementa. Na primjer, da vidimo da li veza ima atribut nofollow. Kliknite desnim tasterom miša na link koji nas zanima i u padajućem kontekstualnom meniju kliknite levim tasterom miša 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 je rel=”nofollow” prisutan u kodu veze. To znači da ovaj link neće “procuriti” i PR. O tome ćemo detaljnije govoriti u budućim člancima. Za sada je važno da sada znate kako vidjeti izvorni kod stranice i izvorni kod pojedinog elementa.
Izdali smo novu knjigu "Marketing sadržaja društvenih medija: Kako ući u glavu pretplatnika i natjerati ih da se zaljube u vaš brend."
Izvorni kod web lokacije je kolekcija HTML oznaka, CSS stilova i JavaScript skripti koje pretraživač prima od web servera.
Više videa na našem kanalu - naučite internet marketing uz SEMANTICA
Može se uporediti sa skupom komandi koje vojnicima daje komandant. Zamislite da publika ne vidi i ne čuje šefa. Sa njihove tačke gledišta, vojska samostalno izvodi akcije. U našem slučaju, komandant je pretraživač, komande su izvorni kod, a vojnici koji marširaju su krajnji rezultat.
Stranica je pohranjena na web serveru koji šalje stranicu na zahtjev korisnika. Zahtjev je upisivanje URL-a u adresnu traku, klik na vezu ili klik na dugme za slanje na obrascu. Nije bitno na kom su jeziku web stranice napisane, da li sadrže softverski dio. Krajnji rezultat bilo kojeg algoritma na strani servera je skup html oznaka i teksta.
Izvorni kod stranice je skup podataka koji uključuje:
- html markup;
- stilski list ili link na fajl;
- programi napisani u JavaScript-u ili veze do datoteka sa kodom.
Ovim trima sekcijama rukuje pretraživač. Za server, 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 se javljaju u toku rada sa sajtom, posebno prilikom njegove optimizacije. Gledajući izvorni kod, možemo:
- Pogledajte meta tagove svoje ili tuđe stranice za njihovu analizu.
- Pogledajte prisustvo ili odsustvo određenih elemenata na sajtu: brojači, identifikacioni kodovi u različitim sistemima, određene skripte i drugo.
- Saznajte parametre elemenata: veličine, boje, fontove.
- Pronađite put do fotografija i drugih elemenata na stranici.
- Pregledajte veze sa stranice.
- Pronađite probleme s kodom koji ometaju proces optimizacije stranice: stilovi koji nisu premješteni u zasebne datoteke, skripte, nevažeći kod.
Ovo su glavne karakteristike, ali u stvari, ako budete u mogućnosti da pročitate kod, možete naučiti mnogo više o stranici.
Kako vidjeti izvorni kod web mjesta
Potpuno u obliku u kojem je postavljen na serveru, to se ne može učiniti iz pretraživača. Ali možete vidjeti cijelu oznaku klikom na stranicu desnim gumbom miša. Ovdje i ispod na primjeru Google Chrome-a.
Odaberite opciju "Prikaži šifru stranice" i preuzmite cijeli popis u posebnoj kartici.
To je samo tekst koji morate raščlaniti da biste ga razumjeli. Ali možete dobiti interaktivni kod pomoću alata za programere.
Kako pronaći izvorni kod web stranice
Kliknite na ikonu menija u pretraživaču. Najčešće je desno i izgleda kao tri tačke ili pruge.
U odjeljku dodatnih alata odaberite "Alati za programere".
Otvoriće se prozor koji prikazuje aktivno stanje koda. To znači da kada kliknete na oznaku pored, bit će prikazan stil elementa, a odabrani blokovi će biti istaknuti na stranici.
Na kartici "Izvor" možete vidjeti sadržaj nekih datoteka: skripte, fontove, slike.
U kartici "Sigurnost" dostupna je provjera certifikata stranice.
Kartica "Revizije" će vam pomoći da provjerite resurse objavljene na hostingu.
Ako je lokacija ploče na desnoj strani nezgodna, možete kliknuti na tri tačke i promijeniti je odabirom željene stavke.
Kako pogledati meta tagove
Svaki html dokument uključuje oznake strukture. Evo nekih od njih:
- html je cijeli dokument.
- Glava - odjeljak zaglavlja servisa.
- Naslov – naslov stranice (prikazuje se na kartici).
- Tijelo - tijelo dokumenta.
- H1-H6 - naslovi teksta stranice.
- Članak - članak.
- Sekcija - sekcija.
- Meni - meni.
- Div - blok.
- Span je niz.
- P - stav.
- Sto - sto.
Elementi su dizajnirani da logički razgraniče dijelove stranice i stilizirani su prema potrebi. Sadrže tekst koji je nekako vidljiv na stranici. Ali oznaka Head sadrži informacije o servisu. Meta tagovi se koriste da ga specificiraju. Sve što je u njima napisano je namenjeno serveru i pretraživačima.
Njihov sadržaj se ne može znati ni na koji drugi način.
Obratimo pažnju na oznaku Link. Koristi se za specificiranje veza do vanjskih uključenih datoteka. Ako želite, možete vidjeti sadržaj i spremiti na disk. Da biste to učinili, zadržite pokazivač miša iznad adrese i kliknite desnim tasterom miša. Odaberite "Otvori u novoj kartici".
Navedeni fajl će se otvoriti u novoj kartici, koju možete pogledati ili sačuvati.
Kako vidjeti izvorni kod stranice za otklanjanje grešaka u skripti
U ovom slučaju, najpogodnije je otvoriti stranicu na lokalnom računalu. Ako trebate samo popraviti oznake, stilove i skripte, to se može učiniti izravno iz mape. Html kod se posmatra na isti način. Ali greške JavaScript koda mogu se vidjeti na kartici "Konzola". Prikazuje opis greške i broj reda na kojem se dogodila.
Sintaksa se može vidjeti direktno u kodu. Ovo je kartica Izvor.
Kako vidjeti kod određenog elementa
Za velike stranice sa mnogo elemenata, teško je pronaći pravi kod u svim oznakama. U tom slučaju trebate koristiti posebnu naredbu iz kontekstnog izbornika. Zadržite pokazivač miša preko fragmenta i pritisnite RMB. Odaberite naredbu View Code.
Otvara se isti prozor, ali sa fokusom na odabranom objektu.
Sažetak
Rekli smo vam koji je izvorni kod stranice. Dovoljno je savladati elementarno znanje HTML-a i CSS-a, a pomoću praktičnih alata za programere možete otkloniti greške u vlastitim html dokumentima.
Pregledavanje koda resursa na webu omogućit će vam da učite ne samo iz vlastitog iskustva, već i da koristite stvarne radne primjere. A za seo stručnjake, meta tagovi će biti korisni, informacije u kojima mogu puno reći o web mjestu.
