Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Windows Phone
  • Izvorni kod prečaca stranice. Kako vidjeti izvorni kod stranice i kod elementa

Izvorni kod prečaca stranice. Kako vidjeti izvorni kod stranice i kod elementa

03.08.2019 Windows Phone
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 dobrobit.

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? Nikako, i nema smisla tugovati zbog toga.

Tako nastaju kvalitetne web stranice. Ako želite, uključite se u ovu stvar i proučite je; ako ne želite, nitko vas 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 mnogo jednostavnije nego što se u početku činilo, ne možete a da ne povjerujete u vlastitu snagu i mogućnosti 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 to 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, svaki put biste morali odrediti boju i veličinu fonta. Za svaku stranicu, ovo je jako dugo. Ali da nema html-a, ne bismo imali tekstove. Grubo objašnjeno, ali općenito je sve tako.

Inače, ako vas zanima kako to radi ovdje možete pogledati na linku na slici 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 prečac na tipkovnici 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 sve to 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!

Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i fokusu stranice. Primjer 4.1 prikazuje kôd za jednostavan dokument koji sadrži osnovne oznake.

Primjer 4.1. Izvorni kod web stranice

Primjer web stranice

Naslov

Prvi paragraf.

Drugi paragraf.

Kopirajte sadržaj ovog primjera i spremite ga u mapu c:\www\ kao example41.html. Nakon toga pokrenite preglednik i otvorite datoteku kroz stavku izbornika Datoteka > Otvori datoteku (Ctrl+O). U dijaloškom okviru za odabir dokumenta odaberite datoteku example41.html. Web stranica prikazana na slici 1 otvorit će se u pregledniku. 4.1.

Riža. 4.1. Rezultat izvođenja primjera

Elementnamijenjen je označavanju vrste tekućeg dokumenta - DTD (definicija vrste dokumenta, opis vrste dokumenta). Ovo je potrebno kako bi preglednik razumio kako interpretirati trenutnu web stranicu, jer HTML postoji u nekoliko verzija, osim toga, postoji XHTML (EXtensible HyperText Markup Language), koji je sličan HTML-u, ali se od njega razlikuje u sintaksi. Kako se preglednik ne bi zbunio i shvatio po kojem standardu treba prikazati web stranicu, potrebno je u prvoj liniji koda postaviti .

Postoji nekoliko vrsta, razlikuju se ovisno o verziji HTML-a koju ciljaju. U tablici 4.1. Navedene su glavne vrste dokumenata s njihovim opisima.

Stol 4.1. Važeći DTD-ovi
DOCTYPE Opis
HTML 4.01
Stroga HTML sintaksa.
Prijelazna HTML sintaksa.
HTML dokument koristi okvire.
HTML 5
Ova verzija HTML-a ima samo jedan doctype.
XHTML 1.0
Stroga XHTML sintaksa.
XHTML prijelazna sintaksa.
Dokument je napisan u XHTML-u i sadrži okvire.
XHTML 1.1
Programeri XHTML 1.1 očekuju da će postupno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na vrste, jer je sintaksa ista i poštuje jasna pravila.

Razlika između strogog i prijelaznog opisa dokumenta je drugačiji pristup pisanju koda dokumenta. Strogi HTML zahtijeva strogo pridržavanje HTML specifikacije i neoprostiv je. Prijelazni HTML je opušteniji u vezi s nekim nedostacima koda, pa je ovu vrstu poželjno koristiti u određenim slučajevima.

Na primjer, u strogom HTML-u i XHTML-u potrebna je prisutnost oznake , au prijelaznom HTML-u može se izostaviti i ne specificirati. Istodobno, sjećamo se da će preglednik prikazati dokument u svakom slučaju, bez obzira odgovara li sintaksi ili ne. Ova se provjera provodi pomoću validatora i prvenstveno je namijenjena programerima za praćenje pogrešaka u dokumentu.</p> <p>Ubuduće ćemo uglavnom koristiti strict<!DOCTYPE>, osim ako nije drugačije navedeno. To će nam omogućiti da izbjegnemo uobičajene pogreške i naučiti nas pisati sintaktički ispravan kod.</p> <p>Često možete pronaći HTML kôd a da ga ne koristite<!DOCTYPE>, web stranica će i dalje biti prikazana u ovom slučaju. Međutim, može se dogoditi da se isti dokument prikazuje drugačije u pregledniku kada koristite<!DOCTYPE>i bez toga. Osim toga, preglednici mogu prikazati takve dokumente na svoj način, kao rezultat stranica se "raspada", tj. bit će prikazan potpuno drugačije od onoga što programer zahtijeva. Kako biste izbjegli takve situacije, uvijek dodajte<!DOCTYPE>na početak dokumenta.</p><p>Označiti <html>definira početak HTML datoteke, zaglavlje je pohranjeno unutar nje ( <head>) i tijelo dokumenta ( <body> ).</p><p>Naslov dokumenta, koji se naziva i blok <head>, može sadržavati tekst i oznake, ali sadržaj ovog odjeljka nije izravno prikazan na stranici, osim u spremniku <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Označiti <meta>je univerzalan i dodaje čitavu klasu mogućnosti, posebno uz pomoć meta oznaka, kako se ova oznaka općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga. Kako bi preglednik shvatio da se radi o UTF-8 kodiranju (format transformacije Unicode), i ovaj redak je dodan.</p><p> <title>Primjer web stranice

Označiti određuje naslov web-stranice; ovo je jedan od važnih elemenata za rješavanje mnogih problema. U operacijskom sustavu Windows naslovni tekst se prikazuje u gornjem lijevom kutu prozora preglednika (slika 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Riža. 4.2. Pogled zaglavlja u pregledniku</p> <p>Označiti <title>je obavezan i svakako mora biti prisutan u šifri dokumenta.</p><p>Morate dodati završnu oznaku</head> za označavanje da je blok naslova dokumenta dovršen.</p><p>Tijelo dokumenta <body>namijenjen za postavljanje oznaka i sadržaja web stranice.</p><p> <h1>Naslov</h1> </p><p>HTML nudi šest tekstualnih naslova različitih razina koji pokazuju relativnu važnost odjeljka koji slijedi nakon naslova. Da, oznaka <h1>predstavlja najvažniji naslov prve razine, a oznaka <h6>služi za označavanje naslova šeste razine i najmanje je značajan. Prema zadanim postavkama, naslov prve razine prikazan je najvećim podebljanim fontom, a naslovi sljedećih razina manji su. Oznake <h1>...<h6>Odnosi se na elemente bloka, oni uvijek počinju u novom retku, a nakon njih se drugi elementi pojavljuju u sljedećem retku. Osim toga, razmak se dodaje prije i iza naslova.</p><p> <!-- Комментарий --> </p><p>Neki se tekst može sakriti od prikazivanja u pregledniku ako ga dodate u komentar. Iako ovaj tekst korisnik neće vidjeti, on će ipak biti prenesen u dokumentu, pa ako pogledate izvorni kod, možete otkriti skrivene bilješke.</p> <p>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.</p><p>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.</p><h2><span>Kako vidjeti izvorni kod html stranice u Google pregledniku</span></h2><i> </i><p>Kako biste mogli vidjeti kod stranice u Chromeu, trebate otići na web mjesto koje vas zanima i izvršiti sljedeće korake:</p><br><img src='https://i2.wp.com/brauzergid.ru/wp-content/uploads/2016/11/kod-elementa-sajta-v-google-chrome1.jpg' align="center" width="100%" loading=lazy loading=lazy><p>Ove dvije stavke razlikuju se po svojoj funkcionalnosti i informacijama za korisnika, programera ili hakera. <br><img src='https://i0.wp.com/brauzergid.ru/wp-content/uploads/2016/11/kod-elementa-sajta-v-google-chrome2.jpg' align="center" width="100%" loading=lazy loading=lazy></p><h2><span>Koja je razlika između koda stranice i samo naredbe "View Code"?</span></h2><p>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.</p><p>Ali da objasnimo prosječnom korisniku, te se funkcije mogu podijeliti u sljedeće svrhe:</p><ol><li>“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 učinio i kojim redoslijedom kako bi osigurao da web mjesto u pregledniku Google Chrome ima takav vanjski dizajn.</li> <li>“View Code” prikazuje detaljnu strukturu, ističući sva područja na stranici koja su zahvaćena. Ako zadržite pokazivač iznad određenog koda popisa, on će istaknuti element na web mjestu kojem pripada.</li> <li>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.</li> <li>“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 web-mjestu - ove promjene utječu samo na kod vašeg Google Chromea i ne idu na mrežu.</li> </ol><h2><span>Razmatramo pitanje kako vidjeti kod elementa</span></h2><p>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.</p> <p>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:</p><h2><span>Drugi načini korištenja ove značajke u pregledniku Google Chrome</span></h2><p>Općenito, nastavljajući odgovoriti na pitanje kako gledati 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:</p><ul><li>Pogledajte strukturu stranice počevši od glave ("zaglavlje stranice") i završavajući s krajem (konačna naredba bilo kojeg programa);</li> <li>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;</li> <li>Saznajte je li kopiranje sa stranice zabranjeno ili ne;</li> <li>Kod će zabilježiti sve poveznice na druge stranice stranice, kao i njihov dizajn i naknadne radnje nakon klika na njih.</li> </ul><blockquote><p>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.</p> </blockquote><h2><span>Stavka "Prikaz koda elementa" ne radi</span></h2><p>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:</p><ul><li>Korisnički profil je oštećen;</li> <li>Prisutnost zlonamjernog softvera na računalu;</li> <li>Blokiranje određenim proširenjem radi povećanja performansi (čak se i to može dogoditi).</li> </ul><h2><span>Popravak oštećenog korisničkog profila</span></h2><p>Da biste kreirali novi profil, morate izbrisati stari sa svog računala. Da bismo to učinili, činimo sljedeće:</p><ol><li>Zatvorite Google Chrome i pokrenite ugrađeni preglednik Windows Explorer.</li> <li>Unesite sljedeću naredbu u adresnu traku: %LOCALAPPDATA%\Google\Chrome\Korisnički podaci\.</li> <li>Kada se direktorij otvori, potražite mapu “Default” i njenom nazivu dodajte “Backup” tako da dobijete sljedeće: “Backup Default”.</li> <li>Sada, nakon ponovnog pokretanja preglednika Chrome, stvorit će se novi profil.</li> </ol><h2><span>Uklanjamo malware ili njegove ostatke</span></h2><p>Ako nam novi profil ne daje pristup kodu elementa stranice, a i dalje vidimo pogrešku, trebali bismo učiniti sljedeće:</p><ol><li>Otvorite Windows naredbeni redak (“Run”) i tamo unesite naredbu “cmd”.</li> <li>Unesite sljedeću naredbu u redak: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.</li> <li>Nakon potvrde radnje unesite ovo: RD /S /Q “%WinDir%\System32\GroupPolicy”.</li> <li>Sada “gpupdate /force” (bez navodnika).</li> </ol><p>Ako je sve učinjeno ispravno, nakon ponovnog pokretanja računala Google Chrome će otvoriti kod elemenata i preglednik će raditi normalno.</p><p><span class="vrPtdr-yGzE"></span></p> <p>Dakle, danas ćemo pogledati nekoliko korisnih alata za web majstore koji olakšavaju život prilikom dizajniranja web stranice. Počnimo s konzolom za web mastera u pregledniku Google Chrome. I prođimo kroz pitanja koja se najčešće javljaju webmasteru tijekom postavljanja web stranice.</p> <p>Da biste došli do konzole, otvorite svoju web stranicu u pregledniku Google Chrome, desnom tipkom miša kliknite bilo gdje na web stranici i odaberite "Prikaži kod stranice" u kontekstualnom padajućem izborniku ili na određeni element za proučavanje odabirom "Prikaži kod" element".</p> <p>Na vrhu ćete imati nekoliko navedenih kartica. Danas ćemo govoriti o kartici "Elementi". <b>, </b> koji prikazuje elemente web stranice s isticanjem oznaka, svojstvima, isticanjem ugniježđenosti elemenata, prikazom hijerarhije elementa u DOM stablu (hint na dnu, od root roditelja do trenutnog koji se ispituje), mogućnost uređivanja elemenata, popis njihovih svojstava, razmotriti pretraživanje po elementima, kao i Upoznajmo se s pregledom css stilova itd., povezanih s elementima.</p> <h3>Kako mogu vidjeti sve stilove koji su povezani s određenim elementom? Koji se sada koristi? U kojim datotekama se nalaze?</h3> <p>Dakle, ništa lakše! Otvorite preglednik Google Chrome, otvorite našu stranicu - izvor pitanja, desnom tipkom miša kliknite na željeni element ako je vidljiv u kontekstu stranice te u kontekstnom izborniku odaberite “View element code”.</p> <p>Na dnu imamo konzolu s istaknutom karticom s lijeve strane "Elementi" i svim stilovima povezanim s elementom s desne strane, gdje: <b>Računalni stilovi</b>– to su općeniti stilovi “sažetka” koji su elementu dodijeljeni iz css pravila i postavki preglednika korisnika (njegovog okruženja), a pritom se kartica sažima.</p> <p>Ali nas zanima kartica "Stilovi", proširena ispod nje, koja redom navodi sve stilove dodijeljene elementu, kao i datoteke u kojima su ta pravila određena za ovaj element prema vrsti, ID-u, klasi, imenu, svojstvu , atribut itd. Štoviše, ako je css pravilo prekriženo, to znači da je redefinirano ranije/kasnije (što olakšava praćenje koje od css pravila ima prioritet i koje se u ovom slučaju primjenjuje na element).</p> <p>Ispod konzole nalazi se linija koja prikazuje element u hijerarhiji dokumenta, što vam jednostavno omogućuje pregled cijelog popisa nadređenih elemenata od korijena do odabranog elementa. Nešto poput "mrvica kruha".</p> <h3>Html oznaka nije vidljiva u kontekstu stranice? Ili trebate pronaći sve oznake, na primjer, prema određenoj klasi, nazivu, svojstvu, vrsti?</h3> <p>Otvorite web mjesto u pregledniku Google Chrome, kliknite desnom tipkom miša, pozovite kontekstni izbornik, odaberite <b>« </b> Pogledajte kod stranice <b>» </b>. Pritisnite kombinaciju tipki "CTRL + F" u isto vrijeme, unesite frazu koja nam je potrebna ( <b>Na primjer</b><i>: </i><i>klasa=”</i><i>podstava"</i>) i krećite se kroz popis pronađenih rezultata, istovremeno gledajući sve stilove povezane sa željenim elementima na desnoj strani stranice.</p> <h3>Kako vidjeti html kod elementa koji se dinamički učitava (na primjer: putem Ajaxa)</h3> <p>Čekamo da se stranica učita u Google Chrome. Izvodimo potrebne radnje za rad Ajaxa. Kliknite desnom tipkom miša na učitane podatke, odaberite “View element code” u kontekstnom izborniku i ispitajte rezultat u konzoli na kartici “Elements” na lijevoj strani.</p> <h3>Pregledajte promjene stila css-a u stvarnom vremenu</h3> <p>Usput, također je prikladno promatrati, ako je potrebno, koji su stilovi dodijeljeni elementu u hodu, na primjer, prilikom pomicanja kroz galeriju i druge događaje mjerača vremena. Svi stilovi dodijeljeni putem javascripta u stvarnom vremenu bit će prikazani u svojstvu <b>stil</b> odabrani element u prozoru na kartici “Elementi”.</p> <h3>Interaktivno pogledajte utjecaj css pravila na prezentaciju html oznaka</h3> <p>Google Chrome nudi interaktivnu konzolu za CSS stilove. To znači da ne samo da možete vidjeti koji su stilovi primijenjeni na element, već i pomicati pokazivač miša preko određenog css svojstva, omogućiti ga pomoću skočnog potvrdnog okvira s desne strane ili ga onemogućiti brisanjem oznake i pregledati rezultirajući rezultat na stranici.</p> <h3>Mijenjamo strukturu prikaza html elemenata u hodu (izravno u pregledniku)</h3> <p>Dakle, već smo naučili kako istražiti strukturu web dokumenta u pregledniku Google Chrome, sada ćemo se ukratko osvrnuti na elemente uređivanja u hodu. Idemo do konzole na bilo koji način koji nam odgovara. Pronalazimo željeni element na kartici "Elementi", desnom tipkom miša kliknite na njega, pozivajući skočni kontekstni izbornik:</p> <ul><li><b>Dodaj atribut</b>– dodaje atribut za navedeni element. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. <b>Na primjer</b>: napišite name="itemImage", koji će odmah biti dodan našem elementu.</li> <li><b>Uredi atribut</b>– ako desnom tipkom miša kliknete atribut elementa, stavka postaje dostupna <b>Uredi</b><b>atribut</b>. Kliknite i uredite.</li> </ul><p><b>Primjer upotrebe:</b> Zaboravili smo lozinku spremljenu pod zvjezdicama u pregledniku Google Chrome (ako je lozinka spremljena u ovom pregledniku). Desnom tipkom miša kliknite na element s unesenom lozinkom, kliknite na “View Element Code” <b>, </b> u konzoli na lijevoj kartici <b>Elementi</b> desni klik na atribut type="password", lijevi klik na <b>Uredi</b><b>atribut</b> promijeniti atribut <i>tip=”</i><i>lozinka"</i> na <i>tip=”</i><i>tekst"</i>, a sada se umjesto zvjezdica ista lozinka prikazuje u tekstualnom obliku.</p> <ul><li><b>Uredi</b><b>html</b>– desni klik na element u konzoli <b>Elementi</b>, Izaberi <b>Uredi</b><b>html,</b> promijenite kod po svom ukusu.</li> <li><b>Kopirati</b><b>kao</b><b>HTML</b>– kopiramo dio HTML-a koji nam je potreban za daljnje istraživanje, recimo, u notepad ili za druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vrijeme.</li> <li><b>Kopirati</b><b>XPATH</b>– kopira XPATH reprezentaciju strukture iz korijena nadređenog elementa u odabrani element.</li> <li><b>Izbrisati</b><b>čvor</b>– ako trebate ukloniti trenutno odabrani element i sve njegove potomke iz konteksta web stranice i vidjeti rezultat.</li> <li><b>Riječ</b><b>omotati</b>– prikazat će prikaz web stranice u kontekstu konzole <b>Elementi</b>čitljiviji.</li> </ul><p>U sljedećim člancima nastavit ćemo razmatrati alate za webmastere, a posebno ćemo se upoznati s preostalim karticama alata za webmastere u <b>Google Chrome</b>, a također razmislite o otklanjanju pogrešaka javascripta pomoću različitih preglednika</p> <p>" Ista stavka nalazi se iu kontekstnom izborniku koji, ako desnom tipkom miša kliknete tekst <b>stranice</b>. Također možete koristiti tipkovni prečac CTRL + U. Mozilla FireFox ne koristi vanjske programe - original <b>kodirati</b> <b>stranice</b> s isticanjem sintakse otvorit će se u zasebnom prozoru preglednika.</p> <p>U Internet Exploreru kliknite izbornik Datoteka i odaberite Uredi u Notepadu. Umjesto naziva Notepad može biti napisano drugo ime, dodijelili ste ga u postavkama preglednika za pregled originala <b>kodirati</b> A. Na klik <b>stranice</b> desnom tipkom miša pojavljuje se kontekstni izbornik koji također ima stavku koja vam omogućuje otvaranje izvora <b>kodirati</b> <b>stranice</b> u vanjskom programu - “View HTML- <b>kodirati</b> A".</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>U pregledniku Opera otvorite izbornik, idite na odjeljak "Stranica" i imat ćete priliku odabrati "Izvor" u pododjeljku "Alati za razvoj" <b>kodirati</b>"ili stavku "Original <b>kodirati</b> okvir." Ovim odabirima dodijeljene su tipke prečaca CTRL + U odnosno CTRL + SHIFT + U. U kontekstnom izborniku vezanom za klik <b>stranice</b> desnom tipkom miša, tu je i stavka “Inicijal <b>kodirati</b>" Opera izvor <b>stranice</b> u vanjskom programu koji je dodijeljen u OS-u ili u postavkama preglednika za uređivanje HTML datoteka.</p> <p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p>Preglednik Google Chrome bez sumnje ima najbolju organizaciju za pregled originala <b>kodirati</b> A. Desnim klikom miša možete odabrati Pogled <b>kodirati</b> A <b>stranice</b>"i tada će se izvorni kod s isticanjem sintakse otvoriti u posebnoj kartici. Ili možete odabrati liniju "Prikaz" u istom izborniku <b>kodirati</b> element” i na istoj kartici otvorit će vam dva dodatna okvira u kojima možete pregledati HTML i CSS <b>kodirati</b> element <b>stranice</b>. Preglednik će reagirati na pomicanje kursora preko linija <b>kodirati</b> i isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a <b>kodirati</b> A.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Najbolji članci na temu</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/hr/sravnenie-oblachnyh-hranilishch-oblachnoe-hranilishche-dannyh-kak.html"> <div class="img_container"><img src="/uploads/9b3cc02cfa3cf73094a4cf67c224e6c3.jpg" border="0" alt="Pohrana podataka u oblaku" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Pohrana podataka u oblaku</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/hr/ustanovka-fotoshopa-cs6-photoshop-ustanovka-i-nachalnye-nastroiki.html"> <div class="img_container"><img src="/uploads/c1e1b79656247ece55680b9e9362620c.jpg" border="0" alt="Photoshop - Instalacija i početne postavke Postavljanje radnog okruženja adobe photoshop cs6" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Photoshop - Instalacija i početne postavke Postavljanje radnog okruženja adobe photoshop cs6</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/hr/kak-vklyuchit-bezopasnyi-rezhim-na-vindovs-8-1-kto-zhe-takoi.html"> <div class="img_container"><img src="/uploads/ef97b05d3bdb447f416bc30afbc5d081.jpg" border="0" alt="Kako omogućiti siguran način rada na Windows 8" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Kako omogućiti siguran način rada na Windows 8</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Kategorije:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/hr/category/programs/">Programi</a></li> <li class=""><a href="https://bumotors.ru/hr/category/safety/">Sigurnost</a></li> <li class=""><a href="https://bumotors.ru/hr/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/hr/category/iron/">Željezo</a></li> <li class=""><a href="https://bumotors.ru/hr/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/hr/category/vkontakte/">U kontaktu s</a></li> <li class=""><a href="https://bumotors.ru/hr/category/errors/">Greške</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="https://vk.com/share.php?url=https://bumotors.ru/ishodnyi-kod-stranicy-goryachie-klavishi-kak-posmotret-ishodnyi-kod-stranicy-i.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/ishodnyi-kod-stranicy-goryachie-klavishi-kak-posmotret-ishodnyi-kod-stranicy-i.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fhr%2Fishodnyi-kod-stranicy-goryachie-klavishi-kak-posmotret-ishodnyi-kod-stranicy-i.html" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2024 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.</span> </div> </div> </div> </div> </body> </html>