Ono što možete vidjeti u izvornom kodu stranice. Kako otvoriti izvorni kod stranice

U početku će neki možda pomisliti da ovo uopće nije neophodan alat, ali pregledavanje cijelog HTML koda stranice je odlično za pronalaženje potrebnih elemenata u kodu, to mogu biti linkovi, tagovi, meta tagovi, atributi i drugi elementi .

Kombinacija prečica +otvorite prozor za pretragu, u Chrome pretraživaču se pojavljuje u gornjem desnom uglu:

Slika 3. Pretraživanje prema kodu stranice

Nakon što unesete zahtjev u obrazac za pretragu, ekran će se pomaknuti na prvi pronađeni element, pomoću strelica možete se kretati između njih i odabrati onaj koji vam je potreban:

Slika 4. Pretraživanje po HTML kodu stranice

Uputstvo 2: kako pregledati i urediti HTML i CSS kod stranice u pregledniku Google Chrome

Sada najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod web stranice u pretraživaču. zatim prenesite promjene u pretraživač.

Ovaj korisni alat je uvijek dostupan u vašem pretraživaču, eksperimentirajte s drugim komandama koje će vam olakšati uređivanje vaše stranice.

Vjerovatnoća gledanja u početni kod web stranice, koji pretraživač prima kao rezultat zahtjeva serveru, dostupan je u gotovo svakom Internet pretraživaču. Pristup odgovarajućoj komandi organizovan je približno identično, ali postoje značajne razlike u načinu i obliku u kojem se početna kod .

Instrukcije

1. U pretraživaču Mozilla FireFox proširite odjeljak "Prikaz" u meniju i kliknite na "Inicijalno" kod stranice" Ista stavka je i u kontekstualnom meniju koji se pojavljuje ako kliknete desnim tasterom miša na tekst stranice. Možete koristiti i kombinaciju tipki CTRL + U. Mozilla FireFox ne koristi eksterne programe - početni kod stranice sa isticanjem sintakse će se otvoriti u posebnom prozoru pretraživača.

2. U Internet Exploreru kliknite na meni Datoteka i izaberite Uredi u Notepad-u. Umjesto naziva Notepad može se napisati drugi program koji ste u postavkama pretraživača dodijelili za pregled početnih kod A. Na klik stranice desnim tasterom miša pojavljuje se kontekstni meni, koji takođe ima stavku koja vam omogućava da otvorite početni kod stranice u eksternom programu – „Prikaži HTML kod A".

3. U pretraživaču Opera otvorite meni, idite na odjeljak „Stranica“ i imat ćete priliku odabrati stavku „Start“ u pododjeljku „Alati za razvoj“ kod"ili stavku "Inicijal kod okvir." Prečice CTRL + U i CTRL + SHIFT + U dodijeljene su ovom odabiru. U kontekstualnom meniju vezanom za klik stranice desnim klikom, tu je i stavka „Inicijal kod" Opera otvara izvorni kod stranice u eksternom programu koji je dodijeljen u OS-u ili u postavkama pretraživača za uređivanje HTML datoteka.

4. Google Chrome pretraživač bez ikakve sumnje ima najbolju organizaciju za pregled inicijalnog kod A. Desnim klikom na stranicu, možete odabrati prikaz kod A stranice"i tada će se izvorni kod sa isticanjem sintakse otvoriti u posebnoj kartici. Ili biste možda više voleli liniju „Pregled“ u istom meniju kod element” i pretraživač na istoj kartici će otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS kod svaki element stranice. Pretraživač će reagovati na kretanje kursora kroz redove kod i, isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a kod A.

5. U Apple Safari pretraživaču proširite odjeljak Pogled i odaberite Prikaži HTML kod A". U meniju koji se pojavljuje kada desnom tipkom miša kliknete otvori stranice, odgovarajuća stavka se zove “Prikaži izvor”. Ovoj radnji se dodeljuju prečice CTRL + ALT + U. Početno kod otvara u posebnom prozoru pretraživača.

Veličina i boja nekih važnih elemenata bloga – kao što su 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 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: bez kukanja, I dalje ću ga pronaći pretraživanjem - metodom poke.

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 html kod na bilo kojoj web stranici. Mnogi blogeri, čak i sa iskustvom, imaju poteškoća sa malim 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 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 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 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 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, nazvan "style sheet"

A ako se pitate kako promijeniti, na primjer, boju naslova web-mjesta, 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 potrošeno, unatoč činjenici da njegova zamjena, 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 čemu namenjeno, gde to tražiti i kako to promeniti. 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?

Č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 ovde šta je kome bliže je bliže. Zanima me još malo, pa sada učim više od Vladimira. U novembru ove godine Vladimir je otvorio svoj blog. Njegov blog je napravljen na najjednostavnijem, besplatnom šablonu, samo ga je malo modificirao kako bi odgovarao sebi.

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 i može sebi 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.

1. 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).
2. Pomeramo kursor miša preko elementa koji ćemo promeniti . U ovom slučaju - naziv bloga. Desnom tipkom miša kliknemo na nju 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čan (ne približan) red koda koji je odgovoran 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 tražiti stvari:

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. Desno u liniji stila css je dat položaj linije u dokumentu. Ako treba da promenite neki drugi element (na primer, morate da saznate gde je linija gde možete da promenite 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. Snažno tražim da se, iako nema povjerenja i potpunog razumijevanja, svi eksperimenti izvode 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 liniju za pretragu pomoću tipki CTRL + F: u gornjem prozoru će se pojaviti prazan linijski prozor. U njega zalijepimo liniju koju smo kopirali u koraku 4.

I vidjet ćete kako će ova linija biti istaknuta u stilu (narandžasto na slici):

Vršimo promjenu elementa. U našem slučaju mijenjamo boju fonta, tako da u liniji COLOR 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. Odaberemo boju, kopiramo njenu digitalnu vrijednost i pažljivo je zamijenimo starom. 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 i 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, 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: