Veličina i boja nekih važnih elemenata bloga – poput naslova bloga ili posta, oznake 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 na ovu temu, shvatio sam jednostavnu stvar: svatko daje primjere iz svojih predložaka, ali svi imamo različite predloške i dobro je da je kod iz primjera barem malo sličan: bez kukanja, Ipak ću ga pronaći pretraživanjem - koristeći metodu poke.
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 traženi html kod na bilo kojoj web stranici. 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 jednostavno načelo o kojem se govori u ovom članku. Ali postoje i složeni slučajevi koji zahtijevaju dublje proučavanje html-a i css-a 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 tekst bliži i razumljiviji, u nastavku slijedi 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, unatoč činjenici da ga sami zamijenite, kako se ispostavilo, 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. Članak o ima korisnu poveznicu na ovu temu.
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 najjednostavnijem, besplatnom predlošku, samo ga je malo modificirao po svojoj mjeri.
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 i može sebi naručiti i kupiti 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 ovom slučaju – 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ći princip gdje tražiti stvari:
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. S desne strane u stilu css retka je dan 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. Izričito tražim da se, iako nema povjerenja i potpunog razumijevanja, svi eksperimenti provode na testnoj poddomeni kako bi se isključio .
Dakle, idite na admin panel: KONZOLA - IZGLED - UREĐIVAČ. Na desnoj bočnoj traci nalazimo datoteku STYLE TABLE (STYLE.CSS), otvorite je.
Sada otvorite redak za pretraživanje pomoću tipki CTRL + F: prazan redak-prozor će se pojaviti u gornjem prozoru. U njega zalijepimo liniju koju smo kopirali u koraku 4.
I vidjet ćete kako će ovaj redak biti istaknut u listu stilova (narančasto na slici):
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. Odaberemo boju, kopiramo njenu digitalnu vrijednost i pažljivo je zamijenimo starom. 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 sami možete lako pronaći i promijeniti bilo koji element html koda, odnosno css koda - 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:
1 glas Dobar dan, dragi čitatelji mog bloga. Ponekad pronađete neku lijepu značajku na web stranici i počnete se pitati kako je kreator postigao tako zanimljiv učinak.
Ispostavilo se da je odgovor vrlo jednostavan. A ako imate neke vještine, možete prikupiti puno ovih značajki i stvoriti vlastitu jedinstvenu web stranicu u kratkom vremenu.
Danas ćemo razgovarati o tome kako otvoriti kod stranice, određenog elementa i naučiti kako koristiti ovu vještinu za svoju korist.
Osnovno poznavanje koda
Moja stranica je namijenjena početnicima i prvo bih želio ukratko govoriti o stranicama i kodu općenito.
Nacrtati sliku, zatim je izrezati na male dijelove, napisati kod tako da će preglednik ponovno sastaviti sve elemente u jednu cjelinu. Čini li se da je sve vrlo komplicirano? Nimalo, i nema smisla tugovati zbog toga.
Tako nastaju kvalitetne web stranice. Ako hoćeš, uključi se u ovu stvar i proučavaj, ako nećeš, nitko te ne može prisiliti.
Reći ću samo jedno... nema ništa ugodnije nego vidjeti kako se nerazumljive riječi koje si napisao pretvaraju u jedinstvenu cjelinu i oživljavaju: linkovi rade, gumbi se pomiču, slike se pomiču, tekst puzi. Mislim da znam kako se osjećao Victor Frankenstein.
Kada počnete shvaćati tajni jezik i vidite da je zapravo sve puno jednostavnije nego što se u početku činilo, ne možete a da ne povjerujete u vlastite snage i sposobnosti mozga. Ovo je jako cool.
Kako se izrađuju web stranice? Idealno, prvo. On samo slika sliku. Na primjer, kao što je prikazano na slici ispod. Za sada je to samo slika, fotografija. Nijedan link ne radi, kada kliknete ne idete nikamo, ne provodi se nikakva pretraga.
Prema ovom crtežu. Pogledajte snimak zaslona u nastavku. Možda mislite da je ovo smiješan i vrlo složen skup simbola. Zapravo, sve nije tako komplicirano, postoji određeni algoritam.
Postoji samo oko 150 oznaka i svaka od njih odgovorna je za određenu radnju: poveznicu, rastavljanje crtica, podebljano, boju, naslov i tako dalje. Razumjeti ih nije tako teško ako imate želju i ne smeta vam vrijeme.
Zahvaljujući poznavanju ovih atributa, možete riješiti gotovo svaki problem. Ali svaki programer pronalazi svoje načine za postizanje cilja.
Iskusni kreatori odmah vide kako postići rezultate, dok drugi moraju razmišljati, tražiti odgovor u člancima ili u izvornom kodu konkurenata. Jednostavno preuzmu potrebni dio sa stranice treće strane i uređuju ga za sebe. To značajno skraćuje proces rada.
Malo kasnije, pokazat ću vam konkretan primjer.
Pogledaj kod
Dakle, dopustite mi da vam prvo pokažem kako postupiti ako trebate saznati tuđi html. Zatim ćemo detaljnije pogledati sva ostala pitanja.
Najbolji način
Metoda koju ću prvo opisati je malo komplicirana za početnike, ali kao uvod, pročitajte je. Otvorite stranicu i kliknite desnom tipkom miša. Odaberite "Spremi kao..."
Spremite cijelu web stranicu. Kao što vidite na snimci zaslona, sve sam već preuzeo unaprijed. Ovdje imamo dvije mape.
Sve što trebate je ovdje. Svaki element. Ako ovo razumijete, možete brzo dobiti sve što vam je potrebno. Ali takav zadatak sve više postaje nemoguć. Nema preuzimanja. Što učiniti ako je zabranjeno kopiranje stranice?
Ovo je Google Chrome
Kao što ste već mogli primijetiti, najčešće koristim Google Chrome i učenje tuđeg koda u ovom pregledniku je jednostavno kao guljenje krušaka. Kao u principu i sa svakim drugim. Shema neće biti samo slična, već i identična. Otvorite stranicu čiji kod želimo znati i desnom tipkom miša kliknite bilo gdje. U prozoru koji se pojavi kliknite "Prikaži kod stranice".
U novom prozoru otvorit će se list koda, što je početniku prilično teško razumjeti. Ali nemojte biti uznemireni prije vremena.
Ako trebate znati kod samo jednog elementa, samo prijeđite mišem iznad njega i kliknite desnom tipkom miša. Odaberite drugu Chromeovu funkciju: “Prikaz koda elementa”.
Na primjer, moglo bi me zanimati kako je napravljen logo, pomoću slike ili programskog jezika? Uostalom, možete nacrtati kvadrat koristeći CSS. Mnogi stručnjaci savjetuju zapisivanje što više informacija u kodu. Kako funkcioniraju na popularnim stranicama?
Sada su se pojavile potrebne informacije. html na vrhu, css na dnu. To su dva jezika. Prvi je odgovoran za tekstualnu komponentu, a drugi za dizajn. Da nema CSS-a, morali biste svaki put odrediti boju i veličinu fonta. Za svaku stranicu, ovo je jako dugo. Ali da nema html-a, ne bismo imali tekstove. Ugrubo sam objasnio, ali generalno, to je tako.
Usput, ako vas zanima kako to radi ovdje, možete pogledati link na sliku ispod. Evo ti odgovora.
Mozilla Firefox
Ako volite raditi u mastiku, onda će sve biti potpuno isto. Otvorite stranicu i kliknite desnom tipkom miša. “Izvorni kod stranice” ako želite vidjeti cijeli kôd.
Kada prijeđete pokazivačem iznad elementa, možete otvoriti njegov kod.
Ovdje se podaci prikazuju na dnu ekrana, ali inače je sve potpuno isto.
Yandex preglednik
U pregledniku Yandex sve je potpuno isto kao u prethodne dvije opcije, otvorite stranicu, kliknite desnom tipkom miša, pogledajte kod stranice.
Lebdimo kursorom iznad elementa ako želimo točno saznati njegov kod.
Ovdje je sve prikazano potpuno isto kao u Chromeu.
Opera
I na kraju, Opera.
Usput, možda ste primijetili da ne morate koristiti miš. Postoji brzi tipkovnički prečac za otvaranje koda, a isti je za sve preglednike: CTRL+U.
Za elemente: Ctrl+Shift+C.
Ovako izgleda rezultat.
Ovo će biti zanimljivo za početnike
Sada pogledajte kako sve funkcionira. Pronađete mjesto i jako vam se svidi neki element. Na primjer, ovaj. Već znate kako otvoriti kod elementa.
Sad kopiraj.
Koristim , zalijepite ovaj kod u novu html datoteku, u oznaku body (body na engleskom).
Sada da vidimo kako će to sve izgledati u pregledniku.
Spreman. Da bi se tekst poravnao po rubovima i dobio zelenkastu boju, potrebno je spojiti css na ovaj dokument i kopirati drugi kod sa stranice sa koje smo kopirali ovaj.
Neću to sada učiniti. Za to je potrebno više vremena: i mog i vašeg. 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 podnijeti, ali želite sada naučiti više o html-u i css-u, tradicionalno vam mogu preporučiti besplatne tečajeve.
Ovdje su 33 lekcije koje će vam omogućiti da savladate html - "Besplatni tečaj o HTML-u" .
A ovdje su potpune informacije o css-u - “Besplatni tečaj o CSS-u (45 video lekcija!)” .
Sad znaš malo više. Želim vam uspjeh u vašim nastojanjima. Vidimo se opet!
Svaki korisnik interneta ima svoje omiljene stranice na kojima provodi dugo vremena. 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, svaki korisnik Google Chromea moći će vidjeti pojedinačne elemente web stranica.
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. Uglavnom, ovo je struktura stranice (bez dodatnih modela u obliku CSS datoteka i ostalih dodataka koji ostaju u mapi kreatora stranice). Ova struktura nije prikladna za stvaranje vlastite stranice "copy-paste", ali će vam omogućiti da vidite što je točno programer napravio i kojim redoslijedom kako bi osigurao da web mjesto u pregledniku Google Chrome ima takav vanjski dizajn.
- “View Code” prikazuje detaljnu strukturu, ističući sva područja na stranici koja su zahvaćena. Ako zadržite pokazivač miša iznad određenog koda popisa, on će istaknuti element na web 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 stranici - 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. Željeli smo razmotriti koje su ključne riječi (u kodu bit će 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 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 je bez posebnog znanja gotovo nemoguće "pročitati" kod Google Chrome stranice, a primljeni podaci praktički nisu potrebni običnom korisniku.
Stavka "Prikaz koda elementa" ne radi
Treba odmah reći da će svaka stranica imati otvoren pristup kodovima 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
Da biste kreirali novi profil, morate izbrisati stari sa svog računala. Da bismo to učinili, činimo 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 njenom nazivu dodajte “Backup” 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 Windows naredbeni redak (“Run”) 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 računala Google Chrome će otvoriti kod elemenata i preglednik će raditi normalno.
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 pregled izvornog koda 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 otvorit će se u posebnom prozoru ili na zasebnoj kartici. 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, pa je u svim preglednicima moguće vidjeti kod pojedinačnog elementa ili fragmenta.
Upotrijebimo konkretan primjer pregleda koda elementa. Na primjer, pogledajmo ima li veza atribut nofollow. Kliknite desnom tipkom miša na poveznicu koja nas zanima iu padajućem kontekstnom izborniku kliknite lijevom tipkom miša 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.
Izdali smo novu knjigu, Marketing sadržaja društvenih medija: Kako ući u glave svojih sljedbenika i navesti ih da se zaljube u vaš brend.
Izvorni kod web-mjesta zbirka je HTML oznaka, CSS stilova i JavaScript skripti koje preglednik prima od web poslužitelja.
Više videa na našem kanalu - naučite internet marketing uz SEMANTICA
Može se usporediti sa skupom naredbi koje vojnicima daje zapovjednik. Zamislite da publika ne vidi i ne čuje šefa. S njihove točke gledišta, vojska akcije provodi samostalno. U našem slučaju, zapovjednik je preglednik, naredbe su izvorni kod, a vojnici koji marširaju konačni su rezultat.
Stranica je pohranjena na web poslužitelju koji šalje stranicu na zahtjev korisnika. Zahtjev je upisivanje URL-a u adresnu traku, klik na vezu ili klik na gumb za slanje na obrascu. Nije važno na kojem su jeziku web-stranice napisane niti uključuju li softversku komponentu. Krajnji rezultat bilo kojeg algoritma na strani poslužitelja je skup html oznaka i teksta.
Izvorni kod stranice je skup podataka koji uključuje:
- html markup;
- lista stilova ili poveznica na datoteku;
- programe napisane u JavaScriptu ili poveznice na datoteke s kodom.
Ova tri odjeljka obrađuje preglednik. Za poslužitelj, 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 nastaju u radu sa stranicom, posebice pri optimizaciji iste. Gledajući izvorni kod, možemo:
- Pogledajte meta oznake svoje ili tuđe web stranice kako biste ih analizirali.
- Pogledajte prisutnost ili odsutnost određenih elemenata na web mjestu: brojači, identifikacijski kodovi u različitim sustavima, određene skripte i druge stvari.
- Saznajte parametre elemenata: veličine, boje, fontove.
- Pronađite put do fotografija i drugih elemenata koji se nalaze na stranici.
- Istražite veze sa stranice.
- Pronađite probleme s kodom koji ometaju proces optimizacije web stranice: stilovi koji nisu smješteni u zasebne datoteke, skripte, nevažeći kod.
Ovo su osnovne značajke, ali zapravo, čitanjem koda možete saznati puno više o stranici.
Kako vidjeti izvorni kod stranice
To neće biti moguće učiniti u potpunosti u obliku u kojem je objavljeno na poslužitelju iz preglednika. Ali možete vidjeti sve oznake desnim klikom na stranicu. Ovdje i dolje na primjeru Google Chromea.
Odaberite opciju "Prikaz koda stranice" i dohvatite cijeli popis u zasebnoj kartici.
To je samo tekst koji morate analizirati da biste ga razumjeli. Ali možete dobiti interaktivni kod pomoću alata za razvojne programere.
Kako pronaći izvorni kod web stranice
Kliknite na ikonu izbornika u pregledniku. Najčešće je s desne strane i izgleda kao tri točke ili pruge.
U odjeljku s dodatnim alatima odaberite "Alati za razvojne programere".
Otvorit će se prozor koji prikazuje aktivno stanje koda. To znači da kada kliknete na oznaku, pored nje će se pojaviti stil elementa, a odabrani blokovi će biti označeni na stranici.
U kartici "Izvor" možete vidjeti sadržaj nekih datoteka: skripte, fontove, slike.
U kartici "Sigurnost" možete provjeriti certifikat stranice.
Kartica "Revizije" pomoći će vam provjeriti resurs objavljen na hostingu.
Ako je mjesto ploče s desne strane nezgodno, možete kliknuti tri točke i promijeniti ga odabirom željene stavke.
Kako vidjeti meta oznake
Svaki HTML dokument uključuje strukturne oznake. Ovo su neki od njih:
- Html – cijeli dokument.
- Glava – odjeljak zaglavlja usluga.
- Naslov – naslov stranice (prikazuje se na kartici).
- Tijelo – tijelo dokumenta.
- H1-H6 – naslovi teksta stranice.
- Članak – članak.
- Sekcija - sekcija.
- Jelovnik – jelovnik.
- Div – blok.
- Raspon – niz.
- P – stavak.
- Stol – stol.
Elementi su dizajnirani za logično omeđivanje odjeljaka na stranici; ako je potrebno, dizajnirani su pomoću stilova. Sadrže tekst koji je na neki način vidljiv na stranici. Ali oznaka Head sadrži servisne informacije. Meta oznake se koriste za označavanje. Sve što je u njima napisano namijenjeno je poslužitelju i tražilicama.
Njihov sadržaj se ne može saznati na drugi način.
Obratimo pozornost na oznaku Link. Uz njegovu pomoć navedene su veze na vanjske uključene datoteke. Po želji možete vidjeti sadržaj i spremiti ga na disk. Da biste to učinili, pomaknite pokazivač na adresu i pritisnite RMB. Odaberite "Otvori u novoj kartici".
Navedena datoteka otvorit će se u novoj kartici koju možete pogledati ili spremiti.
Kako vidjeti izvorni kod stranice za ispravljanje pogrešaka u skripti
U ovom slučaju, najprikladnije je otvoriti stranicu na lokalnom računalu. Ako samo trebate ispraviti oznake, stilove i skripte, to možete učiniti izravno iz mape. HTML kod se gleda na isti način. Ali pogreške JavaScript koda mogu se vidjeti na kartici "Konzola". Ovo pokazuje opis greške i broj retka u kojem se pojavila.
Sintaksa se može vidjeti izravno u kodu. Tome služi kartica "Izvor".
Kako vidjeti kod određenog elementa
Za velike stranice s mnogo elemenata, teško je pronaći potreban kod u svim oznakama. U tom slučaju trebali biste koristiti posebnu naredbu kontekstnog izbornika. Pomaknite miš preko fragmenta i pritisnite RMB. Odaberite naredbu “View Code”.
Otvorit će se isti prozor, ali s fokusom na odabrani objekt.
Sažetak
Rekli smo vam koji je izvorni kod stranice. Dovoljno je svladati osnovno znanje HTML-a i CSS-a, a pomoću prikladnih razvojnih alata moći ćete ispravljati pogreške u vlastitim HTML dokumentima.
Pregled koda resursa na Internetu omogućit će vam učenje ne samo iz vlastitog iskustva, već i korištenje stvarnih primjera rada. A za SEO stručnjake bit će korisne meta oznake, čije informacije mogu puno reći o web mjestu.
