Pretražujući bezbroj sajtova na internetu, možete pronaći neke koje nam se zaista sviđaju. Odmah se nameće brojna pitanja. Da li je stranica napravljena korištenjem samopisnog koda ili nekog CMS-a? Koji su njegovi CSS stilovi? Koje su njegove meta oznake? itd.
Postoji mnogo alata koji se mogu koristiti za izdvajanje informacija o kodu stranice stranice. Ali uvijek imamo pri ruci desnu tipku miša. Koristićemo ga, na primjeru moje stranice.
Kako mogu vidjeti kod stranice?
Da biste vidjeli izvorni kod stranice web-mjesta, potrebno je da postavite pokazivač miša preko bilo kojeg područja web stranice (osim slika i veza). Nakon toga kliknite na desnu tipku miša. Pred nama će se otvoriti prozor sa nekoliko opcija (mogu se malo razlikovati u različitim pretraživačima). U pregledniku Google Chrome, na primjer, ovo su naredbe:
- leđa;
- naprijed;
- ponovno pokretanje;
- sačuvaj kao;
- pečat;
- prevesti na ruski;
- prikaz koda stranice;
- pogledajte kod.
Moramo kliknuti na prikaz koda stranice, a pred nama će se otvoriti html kod stranice stranice.
Pogledajte kod stranice: šta tražiti?
Dakle, Html kod stranice je numerisana lista linija, od kojih svaka nosi informacije o tome kako je ova stranica napravljena. Da biste brzo naučili razumjeti ovaj ogroman broj znakova i posebnih znakova, morate razlikovati različite dijelove koda.
Na primjer, linije koda unutar oznake head sadrže informacije za tražilice i webmastere. Oni nisu prikazani na sajtu. Ovdje možete vidjeti po kojim ključnim riječima se ova stranica promoviše, kako je napisan njen naslov i opis. Također ovdje možete pronaći link, klikom na koji saznajemo o porodici Google fontova koji se koriste na stranici.
Ako je stranica napravljena na CMS WordPress ili Joomla, onda će se i ovdje vidjeti. Na primjer, ovo područje prikazuje informacije o WordPress temi ili Joomla predlošku stranice. Možete ga vidjeti čitajući sadržaj linkova označenih plavom bojom. Jedna veza prikazuje šablon stranice.
Na primjer:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Vidjet ćemo CSS stilove za fontove stranice. U ovom slučaju se koristi font. Možete ga vidjeti ovdje - porodica fontova: 'Source Sans Pro'.
Ova stranica je optimizirana pomoću Yoast SEO seo dodatka. Ovo se može vidjeti iz ovog komentiranog dijela koda:
Ova stranica je optimizirana sa Yoast SEO dodatkom v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Sve informacije unutar oznake tijela se prikazuju od strane pretraživača na ekranu monitora. Ovdje vidimo html kod stranice, a na samom dnu je kod skripte Yandex Metrics. Umotana je u komentiranu oznaku s tekstom:
/Yandex.metric counter
Sažimanje
Nakon što smo izvršili prilično površnu analizu koda glavne stranice stranice, možemo zaključiti uz pomoć kojih alata je ova stranica napravljena. Na njemu smo vidjeli:
- CMS WordPress;
- Google font Source Sans Pro
- WordPress tema - Sydney;
- Yoast dodaci;
- Brojač Yandex metrika.
Sada je princip analize html koda web stranice sasvim jasan. Uopšte nije potrebno istraženu stranicu držati otvorenom u pretraživaču. Kôd stranice možete sačuvati na računar koristeći kombinacije tastera ctrl + a, ctrl + c, ctrl + v. Zalijepite ga u bilo koji uređivač teksta (po mogućnosti Notepad ++) i sačuvajte ga s html ekstenzijom. Stoga ga u svakom trenutku možete dublje proučiti i pronaći više korisnih informacija za sebe.
Dakle, danas ćemo pogledati nekoliko korisnih alata za web master koji olakšavaju život izgledu web stranice. Počnimo s webmaster konzolom u Google Chromeu. I hajde da pređemo na pitanja koja se najčešće postavljaju kod web-mastera tokom izgleda sajta.
Da biste došli do konzole, otvorite svoju web lokaciju u Google Chromeu, kliknite desnim tasterom miša bilo gdje na web stranici i odaberite View Page Code iz kontekstnog padajućeg menija ili na određenu stavku za istraživanje odabirom View Code elementa " .
Na vrhu ćete imati nekoliko navedenih kartica. Danas ćemo govoriti o kartici "Elementi". , koji predstavlja elemente web stranice sa isticanjem tagova, svojstava, isticanje ugniježdenja elemenata, predstavljanje hijerarhije elementa u DOM stablu (hint na dnu, od korijenskog roditelja do trenutno istraženog), mogućnost uredite elemente, listu njihovih svojstava, razmotrite pretragu po elementima, i hajde da se upoznamo sa pregledom css stilova povezanih sa elementima, itd.
Kako mogu vidjeti sve stilove koji su povezani sa određenim elementom? Koji se sada primjenjuje? U kojim fajlovima se nalaze?
Dakle, ništa lakše! Otvaramo pretraživač Google Chrome, otvaramo našu stranicu - izvor pitanja, desnim klikom na željeni element, ako je vidljiv u kontekstu stranice, i odabiremo "Prikaži kod elementa" iz kontekstnog izbornika.
Na dnu imamo konzolu sa označenom karticom na lijevoj strani "Elementi" i svim stilovima povezanim sa elementom na desnoj strani, gdje: Computed Styles- ovo su opšti stilovi "sažetka" koji su dodijeljeni elementu iz css pravila i postavki pretraživača korisnika (njegovog okruženja), dok je kartica skupljena.
Ali nas zanima kartica "Stilovi", proširena ispod nje, u kojoj su svi stilovi dodijeljeni elementu izlistani jedan po jedan, kao i fajlovi u kojima su ova pravila za ovaj element naznačena po njegovom tipu, ID-u, klasi, ime, svojstvo, atribut itd... Istovremeno, ako je css pravilo precrtano, onda je ponovo definisano ranije/kasnije (što olakšava praćenje koje od css pravila ima prioritet i u ovom slučaju se primenjuje na element).
Ispod konzole je linija koja prikazuje element u hijerarhiji dokumenta, lako vam omogućava da vidite cijelu listu nadređenih elemenata od korijena do odabranog elementa. Nešto poput mrvica kruha.
Html oznaka nije vidljiva u kontekstu stranice? Ili trebate pronaći sve oznake, na primjer, prema određenoj klasi, imenu, svojstvu, tipu?
Otvorite stranicu u Google Chromeu, kliknite desnim tasterom miša, otvorite kontekstni meni, odaberite « Pogledajte kod stranice » ... Istovremeno pritisnite kombinaciju tipki "CTRL + F", unesite frazu koja nam je potrebna ( Na primjer: klasa = "padding ") i navigirajte kroz listu pronađenih rezultata, usput pregledavajući sve stilove povezane sa željenim elementima na desnoj strani stranice.
Kako vidjeti html kod elementa(a) koji se dinamički učitavaju (na primjer: od strane Ajaxa)
Čekamo da se stranica učita u Google Chrome. Izvodimo potrebne radnje da Ajax radi. Desnom tipkom miša kliknite na učitane podatke, odaberite "Prikaži šifru elementa" iz kontekstnog izbornika, pregledajte rezultat u konzoli na kartici "Elementi" s lijeve strane.
Pogledajte promjene u css stilovima u realnom vremenu
Usput, također je zgodno promatrati, ako je potrebno, koji su stilovi dodijeljeni elementu u hodu, na primjer, prilikom pomicanja po galeriji i drugih događaja pomoću tajmera. Svi stilovi dodijeljeni javascript-u u realnom vremenu će biti prikazani u svojstvu stil odabrani element u prozoru na kartici "Elementi".
Pregled uživo efekta css pravila na prezentaciju html tagova
Google Chrome pruža interaktivnu konzolu za css stilove. A to znači da ne samo da možete vidjeti koji su stilovi primijenjeni na element, već i pomicati kursor miša preko css specificiranog iz svojstava, omogućiti ga pomoću iskačuće kvačice na desnoj strani ili ga onemogućiti tako što ćete poništiti zastavicu i gledanje rezultirajućeg rezultata na stranici.
Promjena strukture prezentacije html elemenata u hodu (pravo u pretraživaču)
Dakle, već smo naučili kako istražiti strukturu web dokumenta u Google Chromeu, sada ćemo ukratko pogledati elemente uređivanja u hodu. Idemo do konzole na bilo koji način koji nam odgovara. Pronađemo traženi element na kartici "Elementi", kliknemo desnim tasterom miša na njega i tako pozovemo skočni kontekstni meni:
- Dodaj atribut- dodaje atribut za navedeni element. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. na primjer: napišemo name = "itemImage", koji će odmah biti dodan našoj stavci.
- Uredi atribut- ako desnom tipkom miša kliknete na atribut elementa, stavka postaje dostupna editatribut... Kliknite, uredi.
Primjer upotrebe: zaboravili smo lozinku sačuvanu pod zvjezdicama u Google Chromeu (ako je lozinka sačuvana u ovom pretraživaču). Desni klik na stavku sa lozinkom, kliknite na "Prikaži šifru artikla" , u konzoli na lijevoj strani kartice Elementi kliknite na tip atributa = "lozinka" desnim dugmetom miša, levim klikom na Urediatribut, mijenjanje atributa tip = "lozinka " na tip = "tekst ", a sada se umjesto zvjezdica prikazuje ista lozinka u obliku teksta.
- Uredihtml- kliknite desnim tasterom miša na stavku u konzoli Elementi, izaberite Uredihtml, promijenite kod po svom ukusu.
- KopirajasHtml- kopirajte HTML dio koji nam je potreban za daljnje istraživanje, recimo, u notepad, ili u druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vreme.
- KopirajXPATH- kopira XPATH reprezentaciju strukture iz korijena roditeljskog elementa u odabrani element.
- Izbrišičvor- ako trebate ukloniti trenutno odabrani element i svu njegovu djecu iz konteksta web stranice i vidjeti rezultat.
- Riječzamotati- će prikazati prikaz web stranice u kontekstu konzole Elementičitljiviji.
U sljedećim člancima nastavit ćemo razmatranje alata za webmastera, a posebno ćemo se upoznati s ostalim karticama alata za webmastera u Google chrome, a također razmotrite otklanjanje grešaka u javascriptu koristeći različite pretraživače
Veličina i 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 sam morao promijeniti boju linkova. Prebacivši gomilu literature o ovom pitanju, shvatio sam jednostavnu stvar: svako daje primjere iz svojih šablona, ali svi imamo različite šablone i dobro je ako je kod iz primjera makar i malo sličan: ja nisam cvileći, još ću ga naći kotrljanjem - metodom bockanja.
Broj nije prošao sa referentnim kodom. Svi su ukazivali na potpuno različite puteve. Pitao sam se da li postoji jednostavan i precizan instrument, kako pronaći potreban html kod na bilo kojoj stranici. Mnogi blogeri, čak i sa iskustvom, smatraju da je teško malo podesiti šablon. U tome nema ništa loše, jer svako ima svoje interese i ciljeve za kreiranje web stranice.
Ako želite napraviti male promjene u predlošku, na primjer promijeniti bilo koji naslov, naslov članaka i naslova, boju i veličinu fontova i linkova, obično je dovoljno naučiti jednostavan princip o kojem 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 me prijatelj zamolio da saznam gdje da promijenim boju trake naslova u njegovom predlošku. Prenio je temu 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, za vas na kraju članka video tutorijal koji govori kako možete vidjeti html kod web mjesta koristeći Notepad ++ i napraviti promjene u dizajnu bilo kojeg predloška koristeći primjer kako promijeniti boju fonta. Postoje i druge suptilnosti rukovanja blogom u videu. A za one kojima je tekst bliži i jasniji, u nastavku je detaljna analiza teme sa snimcima ekrana.
httpv: //youtu.be/uIlVvwCt2ho
Termini i koncepti
Tačnije bi bilo nazvati članak “ Kako pronaći css kod“, Ali odlučio sam da ostanem s “pogrešnim” imenom, 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. 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 temelj na kojem je izgrađena lokacija. Ako je uporedimo sa kućom, onda je ovo njen raspored, raspored prostorija.
- CSS- odgovoran je za dizajn (koji fontovi, veličine, boje i slično). Ovo je opći stil kuće i stil njenih pojedinačnih prostorija: kakve će biti tapete, lampe, zavjese, namještaj. Dakle, dokument u kojem je css kodovi, nazvan "tabela stilova"
A ako ste se pitali kako promijeniti, na primjer, boju naslova web-mjesta, veličinu fonta u tekstovima ili boju naslova na bočnoj traci, onda sve to trebate potražiti u CSS listi stilova. Ovo je jedina stvar koju vrijedi razumjeti za početak kako biste sami izvršili promjene u kodu.
Volim da složeno pretvorim u jednostavno. 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 na servis. Zamislite koliko je novca bačeno, uprkos činjenici da nezavisna zamjena, kako se ispostavilo, košta peni.
Jednom sam pogledao šta majstor radi. Još uvijek ne znam kako radi osigurač. Ali znam gde da ga promenim). Ne bih sam popravljao motor, a ni osigurač nije teško zamijeniti. Isto je i sa web stranicama.
Ako ne želite da postanete programer, onda nema potrebe za dubokim razumevanjem programiranja. Dovoljno je jasno razumjeti šta je čemu namijenjeno, gdje to tražiti i kako to promijeniti. Bolje je promijeniti ono što je moguće, a ostalo prepustiti stručnjacima. Članak o sadrži korisnu vezu na ovu temu.
Trebam li biti stručnjak za sve
U seo blogovima se često vode rasprave o tome da li početnik treba da se duboko razumije u html ili još bolje - nauči sam da piše web stranice da sve bude jedinstveno.. Pa ne znam - svakom svoje, i onda ko je nekome bliži. Zanima me malo više, pa sada dodatno učim od Vladimira. 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 rang listi svih stranica na Runetu sa prometom od oko 1,5 hiljada ljudi dnevno. Za 10 dana. Pa šta je bilo? Vladimir dobro poznaje html, može naručiti i kupiti jedinstveni šablon. Trebalo bi da razumete to tajna nije u šablonima, već u korisnosti informacija.
Gdje se krije html kod
Oprostite na digresiji, vratimo se na naše šifre). Recimo da želite promijeniti boju fonta naslova bloga. Razmotrimo to na primjeru mog testnog mjesta.
- Otvaranje stranice u pregledniku Google Chrome (ako ga već ne koristite, instalirajte ga - dobro je izoštren za rad sa web stranicama, ima puno ugrađenih alata).
- Zadržite pokazivač miša iznad elementa koji ćemo promijeniti ... U ovom slučaju, naziv bloga. Kliknite na njega "desnim" mišem i u prozoru koji se pojavi odaberite PRIKAZ KOD ELEMENTA.
VAŽNO: nemojte brkati sa PREGLED KOD STRANICE! Sada nam ne treba cijela stranica, samo jedan element.
Kliknite na njega - prozor za prikaz koda pojavljuje se na dnu pretraživača:
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 točnu (a ne približnu) liniju koda odgovornu za fontove, boju, veličinu, naglasak i još mnogo toga. Na ovaj način možete saznati BILO KOJI kod bilo kojeg elementa bilo kojeg šablona.
Pronađite potrebnu liniju u bloku označenom plavom bojom. Sa desne strane se nalazi klizač, možete skrolovati i pronaći željenu liniju.
Opšti princip, gde je ono što se traži:
Naziv fonta - u redu FONT FAMILY
Veličina fonta - u redu FONT SIZE
Boja fonta - u liniji COLOR
Postoje tri glavne linije koje mijenjaju naziv, veličinu i boju fonta bilo kojeg elementa. Na desnoj strani, u stilu css linije, dat je položaj 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 na drugoj slici označenu crvenim pravokutnikom. U mom predlošku, ona je odgovorna za promjenu boje naziva stranice:
#header h1 a, #header h1 a: posjećeno (
Pronađite potrebnu liniju u datoteci "style sheet (style.css)". Ovo se već radi na admin panelu. Snažno molim, dok nema povjerenja i potpunog razumijevanja, da se svi eksperimenti provedu na testnoj poddomenu kako bi se isključili.
Dakle, idite na admin panel: KONZOLA - IZGLED - UREDNIK. U desnoj bočnoj traci nalazimo datoteku STYLE TABLE (STYLE.CSS), otvorite je.
Sada otvorite traku za pretraživanje pomoću tipki CTRL + F: u gornjem prozoru će se pojaviti prazna linija prozora. U njega zalijepimo liniju koju smo kopirali u koraku 4.
I vidjet ćete kako je ova linija istaknuta u stilu (na slici - narančastom):
Vršimo promjenu elementa. U našem slučaju mijenjamo boju fonta, tako da zamjenjujemo drugu vrijednost u liniji BOJA - boju koju želimo. U primjeru, boja je crna, njena vrijednost:
Boju možete odabrati u bilo kojoj usluzi paleta web boja: u pretraživač ukucajte "Paleta web boja" i odaberite onu koju želite. Odaberite boju, kopirajte njenu digitalnu vrijednost i pažljivo je zamijenite starom. zatim kliknite UPDATE FILE i idite da vidite šta se dogodilo.
Ako promjene nisu bile prikazane, u proteklom satu, a zatim 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 te više mučiti šiframa. Nadam se da sada i sami možete lako pronaći i promijeniti bilo koji element html koda, odnosno css koda - stručnjaci će mi oprostiti na pojednostavljenju. A ako ne razumijete, posjetite stranicu svejedno. Ne gubite vrijeme na gluposti.
Predlažem da pogledate video Artema Abramoviča o tome kako pretraživati i pronaći u bilo kojoj temi/predlošku, za bilo koji motor (wordpress, joomla, itd.) bilo koju riječ ili element i zamijeniti je onim što vam je potrebno:
Molimo podijelite ako vam se svidjelo:
Možda ćete biti zainteresovani da saznate više:
Izdali smo novu knjigu „Marketing sadržaja na društvenim mrežama: Kako doći do glava pretplatnika i zaljubiti se u svoj brend“.
Izvorni kod web lokacije je kolekcija HTML oznaka, CSS stilova i JavaScripta 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 može vidjeti ni čuti š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 klikanje na dugme za slanje na obrascu. Nije bitno na kom su jeziku web stranice napisane, da li sadrže kod. 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 da ih analizirate.
- 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 stavki na stranici.
- Istražite veze sa stranice.
- Pronađite probleme s kodom koji ometaju proces optimizacije web stranice: stilovi, skripte, nevažeći kod koji nije uključen u zasebne datoteke.
Ovo su osnovne karakteristike, ali u stvari, ako znate kako čitati kod, možete naučiti mnogo više o stranici.
Kako pogledati izvorni kod stranice
U potpunosti u obliku u kojem je objavljen na serveru, to se ne može učiniti iz pretraživača. Ali sve oznake možete vidjeti desnim klikom na stranicu. U nastavku, koristeći primjer Google Chrome-a.
Odabiremo opciju "Prikaži šifru stranice" i dobivamo cijeli popis u posebnoj kartici.
To je samo tekst koji će se morati raščlaniti da bi se razumio. Ali možete dobiti interaktivni kod pomoću alata za programere.
Kako pronaći izvorni kod stranice 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, stil elementa će biti prikazan pored njega, a odabrani blokovi će biti istaknuti na stranici.
Na kartici "Izvor" možete vidjeti sadržaj nekih datoteka: skripte, fontove, slike.
Provjera certifikata stranice dostupna je na kartici "Sigurnost".
Kartica "Revizije" će vam pomoći da provjerite resurse objavljene na hostingu.
Ako je lokacija ploče s desne strane 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 - cijeli dokument.
- Glava - odjeljak zaglavlja servisa.
- Naslov - naslov stranice (prikazuje se na kartici).
- Tijelo - tijelo dokumenta.
- H1-H6 - zaglavlja teksta stranice.
- Članak - članak.
- Sekcija - sekcija.
- Meni - meni.
- Div - blok.
- Span je niz.
- P - stav.
- Sto - sto.
Elementi su namijenjeni za logičko razgraničenje dijelova na stranici, po potrebi se stiliziraju. Sadrže tekst koji je nekako vidljiv na stranici. Ali oznaka Head sadrži informacije o servisu. Meta tagovi se koriste za označavanje. Sve što je u njima napisano je namenjeno serveru i pretraživačima.
Njihov sadržaj je nemoguće saznati na bilo koji drugi način.
Obratimo pažnju na oznaku Link. Uz njegovu pomoć, naznačene su veze do vanjskih uključenih datoteka. Ako želite, možete vidjeti sadržaj i spremiti na disk. Da biste to učinili, zadržite pokazivač iznad adrese i pritisnite RMB. Odaberite "Otvori u novoj kartici".
Navedeni fajl će se otvoriti u novoj kartici i može se pregledati 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, onda to možete učiniti izravno iz mape. html kod se posmatra na isti način. Međutim, greške JavaScript koda se mogu vidjeti na kartici "Konzola". Prikazuje opis greške i broj linije na kojoj se pojavila.
Sintaksa se može vidjeti direktno u kodu. Za to je namijenjena kartica "Izvor".
Kako vidjeti kod određene stavke
Za velike stranice sa puno elemenata, teško je pronaći kod koji želite u svim oznakama. U tom slučaju trebate koristiti posebnu naredbu kontekstnog izbornika. Zadržite pokazivač miša preko fragmenta i pritisnite RMB. Odaberimo naredbu "Pregled koda".
Otvara se isti prozor, ali sa fokusom na odabrani objekt.
Sažetak
Rekli smo vam koji je izvorni kod stranice. Dovoljno je savladati osnovno 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 Internetu omogućit će vam da učite ne samo iz vlastitog iskustva, već i koristite stvarne radne primjere. A za seo stručnjake, meta tagovi će biti korisni, informacije u kojima mogu puno reći o web mjestu.
Ctrl + U
Kako mogu vidjeti izvorni kod stavke?
Desni klik na element od interesa na stranici.
Google chrome: "Prikaži šifru artikla"
Opera: "Istraži element"
FireFox: "Analiziraj element"
Potražite sličnu stavku menija u drugim pretraživačima.
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 da nađem deo koda. U ovom slučaju u polje za pretragu upisujemo riječ “ ključne riječi”. Automatski ćete biti preusmjereni na isječak koda sa ovom meta oznakom i istaći ćete željenu riječ.
Po analogiji, možete pretraživati i proučavati druge dijelove koda.
Pregledanje cijelog izvornog koda stranice u većini slučajeva nije baš zgodno, pa je u svim pretraživačima moguće vidjeti kod pojedinačnog 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 kontekstnom meniju kliknite levim tasterom miša na stavku "Prikaži šifru artikla" ili slično (u zavisnosti od vašeg pretraživača). U nastavku, u posebnom prozoru za analizu koda, dobijamo nešto slično.
Možemo vidjeti 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 sljedećim člancima. Ono što je sada važno jeste da sada znate kako da vidite izvorni kod stranice i izvorni kod pojedinačnog elementa.
