1 glas
Dobar dan, dragi čitaoci mog bloga. Ponekad na stranici nađete neku lijepu funkciju i pitanje počinje da muči kako je kreator postigao tako zanimljiv efekat.
Ispostavilo se da je odgovor prilično lak. A ako imate neke vještine, možete prikupiti mnogo takvih čipova i kreirati vlastitu jedinstvenu web stranicu za kratko vrijeme.
Danas ćemo razgovarati o tome kako otvoriti kod stranice, određeni element i naučiti kako iskoristiti ovu vještinu u svoju korist.
Osnovno znanje o kodu
Moj sajt je za početnike i prvo bih želeo da ukratko govorim o sajtovima i kodu uopšte.
Da nacrtate sliku, a zatim je izrežite na male komadiće, napišite kod, zahvaljujući kojem će pretraživač ponovo sakupiti sve elemente u jednu cjelinu. Čini se da je sve veoma komplikovano, zar ne? Nikako, i nije vrijedno brige o tome.
Tako se grade kvalitetne web stranice. Ako hoćeš - uđi u ovaj posao i uči, nema želje - niko te ne može natjerati.
Reći ću samo jedno... nema ništa ugodnije nego vidjeti kako se nerazumljive riječi koje ste napisali pretvaraju u jedinstvenu cjelinu i oživljavaju: linkovi rade, dugmad se pomiče, slike pomiču, tekst puzi. Mislim da znam kako se Viktor Frankenštajn osećao.
Kada počnete da shvaćate tajni jezik i vidite da je sve zapravo mnogo jednostavnije nego što se u početku činilo, ne možete a da ne vjerujete u vlastite moći i mogućnosti mozga. Veoma je kul.
Kako se prave web stranice? Idealno, prvo. On samo slika sliku. Na primjer, kao što je prikazano na donjoj slici. Za sada je ovo samo slika, fotografija. Nijedna veza ne radi, kada kliknete ne idete nikuda, pretraga se ne vrši.
Prema ovom crtežu. Pogledajte snimak ekrana ispod. Možda mislite da je ovo smiješan i vrlo složen skup likova. Zapravo, sve nije tako teško, postoji određeni algoritam.
Postoji samo oko 150 oznaka i svaki od njih je odgovoran za određenu radnju: link, transfer, bold, boja, naslov itd. Razumjeti ih nije tako teško ako imate želju i ne smeta vam vrijeme.
Zahvaljujući poznavanju ovih atributa, gotovo svaki problem se može riješiti. Evo samo načina za postizanje cilja, svaki programer pronalazi svoj.
Iskusni kreatori odmah vide kako postići rezultate, dok drugi moraju razmišljati, tražiti odgovor u člancima ili u izvornom kodu konkurenata. Oni jednostavno uzimaju potrebnu ulogu na web-stranici treće strane i uređuju je za sebe. Ovo značajno skraćuje radni proces.
Malo kasnije ću vam pokazati konkretan primjer.
Pogledaj kod
Dakle, dozvolite mi da vam prvo pokažem kako da postupite ako trebate naučiti tuđi html. Zatim ćemo detaljnije razmotriti sva ostala pitanja.
Najbolji način
Metoda koju ću prvo opisati je malo komplikovana za početnike, ali kao uvod, čitajte dalje. Otvorite stranicu i kliknite na desnu tipku miša. Odaberite "Sačuvaj kao..."
Sačuvajte cijelu web stranicu. Kao što možete vidjeti na snimku ekrana, sve sam već preuzeo unaprijed. Ovdje imamo dva foldera.
Sve što vam treba je ovdje. Svaki element. Ako ovo shvatite, možete brzo dobiti sve što vam je potrebno. Ali, takav zadatak sve više postaje nemoguć. Preuzimanje nije izvršeno. Šta učiniti ako je zabranjeno kopiranje stranice?
To je Google Chrome
Kao što ste možda primijetili, najčešće koristim Google Chrome i lako je prepoznati tuđi kod u ovom pretraživaču. Kao u principu i u svakom drugom. Shema neće biti slična, već identična. Otvaramo stranicu čiji kod želimo da saznamo i kliknemo bilo gde desnim tasterom miša. U prozoru koji se pojavi kliknite na "Prikaži kod stranice".
List koda će se otvoriti u novom prozoru, što je početniku prilično teško razumjeti. Ali, nemojte se plašiti unapred.
Ako trebate znati šifru samo jednog elementa, samo zadržite pokazivač miša preko njega i kliknite desnim tasterom miša. Odabiremo drugu hromiranu funkciju: "Pogledaj kod elementa".
Na primjer, možda bi me zanimalo kako je napravljen logo, koristeći sliku ili programski jezik? Na kraju krajeva, možete nacrtati kvadrat koristeći css. Mnogi stručnjaci savjetuju pisanje što više informacija u kodu. A kako funkcioniraju popularne stranice?
Evo informacija koje su vam potrebne. Gornji html, donji css. Ovo su dva jezika. Prvi je odgovoran za tekstualnu komponentu, a drugi za dizajn. Da nije postojao css, onda biste morali svaki put propisati boju, veličinu fonta. Za svaku stranicu je veoma dugačak. Ali da nema html-a, onda ne bismo imali tekstove. Grubo objašnjeno, ali generalno, sve je tako.
Inače, ako vas zanima kako to funkcionira ovdje, možete vidjeti link do slike ispod. Evo tvog odgovora.
Mozilla Firefox
Ako volite da radite u njuškici, onda će sve biti potpuno isto. Otvorite stranicu i kliknite na desnu tipku miša. "Izvorni kod stranice" ako želite vidjeti cijeli kod.
Kada zadržite pokazivač iznad elementa, možete otvoriti njegov kod.
Ovdje su podaci prikazani na dnu ekrana, ali sve ostalo je potpuno isto.
Yandex pretraživač
U Yandex pretraživaču sve je potpuno isto kao u prethodne dvije opcije, otvorite stranicu, kliknite desnim klikom, pogledajte kod stranice.
Prelazimo preko elementa ako želimo da saznamo tačno njegov kod.
Ovdje je sve prikazano na isti način kao u hromu.
Opera
I konačno, Opera.
Usput, možda ste primijetili da nije potrebno koristiti miš. Za otvaranje koda postoji brza prečica na tastaturi i ista je za sve pretraživače: CTRL+U.
Za elemente: Ctrl+Shift+C.
Ovako izgleda rezultat.
Biće zanimljivo za početnike
Sada pogledajte kako sve funkcionira. Nađete sajt i zaista vam se sviđa neki element. Na primjer, ovaj. Već znate kako otvoriti kod elementa.
Sada kopirajte.
Koristim , nalijepim ovaj kod u novu html datoteku, u body tag (body na engleskom).
Sada da vidimo kako sve to izgleda u pretraživaču.
Spreman. Da bi se tekst poravnao po ivicama i dobio zelenkastu boju potrebno je da povežete css sa ovim dokumentom i kopirate još jedan kod sa sajta sa kojeg smo ovaj ukrali.
Sada to neću učiniti. Potrebno je više vremena: i moje i tvoje. Mislim da ću sve detalje opisati u svojim budućim publikacijama. Pretplatite se na newsletter i budite prvi koji će saznati kada se članak pojavi.
Ako ne možete izdržati, ali želite da naučite više o html-u i css-u upravo sada, onda vam tradicionalno mogu preporučiti besplatne kurseve obuke.
Evo 33 lekcije koje će vam omogućiti da savladate html - "Besplatni HTML kurs"
.
A evo i kompletnih informacija o css-u - "Besplatni CSS kurs (45 video lekcija!)"
.
Sada znate malo više. Želim vam uspjeh u vašim nastojanjima. Vidimo se uskoro!
Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i smjeru stranice. Primjer 4-1 prikazuje kod za jednostavan dokument koji sadrži osnovne oznake.
Primjer 4.1. Izvorni kod web stranice
Primjer web stranice
header
Prvi paragraf.
Drugi paragraf.
Kopirajte sadržaj ovog primjera i sačuvajte ga u folderu c:\www\ kao example41.html. Nakon toga pokrenite pretraživač i otvorite datoteku kroz stavku menija Datoteka > Otvori datoteku (Ctrl+O). U dijalogu za odabir dokumenta navedite datoteku example41.html. Web stranica prikazana na sl. 4.1.
Rice. 4.1. Rezultat pokretanja primjera
Elementsluži za označavanje tipa tekućeg dokumenta - DTD (definicija tipa dokumenta, opis tipa dokumenta). Ovo je neophodno kako bi pretraživač shvatio kako interpretirati trenutnu web stranicu, jer HTML postoji u nekoliko verzija, osim toga, postoji i XHTML (EXtensible HyperText Markup Language, prošireni jezik za označavanje hiperteksta), sličan HTML-u, ali drugačiji po sintaksi. Da se pretraživač "ne zbuni" i shvati po kom standardu da prikaže web stranicu, potrebno je postaviti u prvom redu koda
.
Postoji nekoliko tipova, razlikuju se ovisno o verziji HTML-a na koju ciljaju. U tabeli. 4.1. date su glavne vrste dokumenata sa njihovim opisom.
Tab. 4.1. Važeći DTD | DOCTYPE |
Opis |
|---|
| HTML 4.01
|
|
|
Stroga HTML sintaksa. |
|
|
Prijelazna HTML sintaksa. |
|
|
Okviri se koriste u HTML dokumentu. |
| HTML 5
|
|
|
Ova verzija HTML-a ima samo jedan tip dokumenta. |
| XHTML 1.0
|
|
|
Stroga XHTML sintaksa. |
|
|
Prijelazna XHTML sintaksa. |
|
|
Dokument je napisan u XHTML-u i sadrži okvire. |
| XHTML 1.1
|
|
|
Programeri XHTML 1.1 očekuju da će postepeno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na tipove, jer je sintaksa ista i poštuje jasna pravila. |
Razlika između striktnih i prelaznih opisa dokumenata je različit pristup pisanju koda dokumenta. Strogi HTML zahtijeva striktno pridržavanje HTML specifikacije i ne oprašta greške. Prijelazni HTML je "tiši" u pogledu nekih nedostataka koda, tako da je ovaj tip poželjniji u određenim slučajevima.
Na primjer, strogi HTML i XHTML zahtijevaju oznaku
, ali u prelaznom HTML-u se može izostaviti i ne specificirati. Istovremeno, imajte na umu da će pretraživač u svakom slučaju prikazati dokument, bez obzira da li se podudara sa sintaksom ili ne. Takva provjera valjanosti se provodi pomoću validatora i namijenjena je prvenstveno programerima da prate greške u dokumentu.</p>
<p>U nastavku ćemo uglavnom koristiti strict<!DOCTYPE>, osim tamo gdje je izričito navedeno. Ovo će nam omogućiti da izbjegnemo uobičajene greške i naučimo nas pisati sintaktički ispravan kod.</p>
<p>Često je moguće naići na HTML kod bez korištenja<!DOCTYPE>, web stranica će i dalje biti prikazana u tom slučaju. Međutim, može se desiti da se isti dokument drugačije prikazuje u pretraživaču kada se koristi<!DOCTYPE>i bez toga. Osim toga, pretraživači mogu prikazati takve dokumente na svoj način, kao rezultat toga, stranica će se „srušiti“, tj. će biti prikazan na potpuno drugačiji način, kako to zahtijeva programer. Da biste izbjegli takve situacije, uvijek dodajte<!DOCTYPE>na početak dokumenta.</p><p>Tag <html>definira početak HTML datoteke, zaglavlje se pohranjuje unutar njega ( <head>) i tijelo dokumenta ( <body>
).</p><p>Naslov dokumenta, kako se i blok naziva <head>, može sadržavati tekst i oznake, ali sadržaj ovog odjeljka nije prikazan direktno na stranici, osim spremnika <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Tag <meta>je univerzalan i dodaje čitavu klasu funkcija, posebno uz pomoć meta tagova, kako se ova oznaka općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga. Da bi pretraživač shvatio da ima posla sa UTF-8 kodiranjem (Unicode transformacijski format, Unicode transformacijski format) i dodaje se ova linija.</p><p>
<title>Primjer web stranice
Tag
definira naslov web stranice, to je jedan od važnih elemenata dizajniranih za rješavanje mnogih problema. U operativnom sistemu Windows, tekst naslova se prikazuje u gornjem levom uglu prozora pretraživača (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>Rice. 4.2. Prikaz zaglavlja u pretraživaču</p>
<p>Tag <title>je obavezan i mora biti prisutan u šifri dokumenta.</p><p>Obavezno dodajte završnu oznaku</head> da označi da je naslovni blok dokumenta završen.</p><p>Tijelo dokumenta <body>namijenjen je postavljanju oznaka i sadržaja web stranice.</p><p>
<h1>header</h1>
</p><p>HTML nudi šest različitih nivoa tekstualnih naslova koji ukazuju na relativnu važnost odjeljka koji slijedi nakon naslova. da, oznaka <h1>predstavlja najvažniji naslov prvog nivoa i oznaku <h6>služi za označavanje naslova šestog nivoa i najmanje je značajan. Podrazumevano, naslov prvog nivoa se prikazuje najvećim podebljanim fontom, naslovi sledećeg nivoa su manji. oznake <h1>...<h6>su elementi na nivou bloka, uvijek počinju u novom redu, a nakon njih se drugi elementi pojavljuju u sljedećem redu. Osim toga, prazan prostor se dodaje ispred i iza naslova.</p><p>
<!-- Комментарий -->
</p><p>Neki tekst se može sakriti od prikazivanja u pretraživaču tako što ćete ga ostaviti komentarom. Iako korisnik neće vidjeti takav tekst, on će i dalje biti prenošen u dokumentu, tako da pogled u izvorni kod može otkriti skrivene bilješke.</p>
<p>Svaki korisnik interneta ima svoje omiljene stranice na kojima provodi dugo vremena. I samo lijeni nisu pomislili da vide kako je nastao i od čega se sastoji. Na sva ova pitanja neće biti moguće odgovoriti, jer postoji mnogo načina za kreiranje stranice, ali pogledati komande i kodove od kojih se sastoji moguće je i javno dostupno svima.</p><p>Drugo pitanje je da li će osoba koja se ne bavi programiranjem razumjeti neke od simbola koji čine kod. Ali iz primjera koji će biti prikazani u nastavku, svaki korisnik Google Chrome-a će moći vidjeti pojedinačne elemente web lokacija.</p><h2><span>Kako pogledati izvorni kod html stranice u Google pretraživaču</span></h2><i>
</i><p>Da biste mogli da vidite kod stranice u Chromeu, potrebno je da odete na sajt koji vas zanima i sledite ove 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 točke se razlikuju po svojoj funkcionalnosti i sadržaju informacija 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 "Prikaži kod".</span></h2><p>Analizirajući svaku od ovih funkcija, možete napisati poseban članak. Za programere je ova razlika značajna i oni razumiju u kojim slučajevima je potrebno koristiti “View Code” a u kojim “View Page Code” u pretraživaču Google Chrome.</p><p>Ali objašnjavajući za prosječnog korisnika, ove funkcije se mogu podijeliti u sljedeće svrhe:</p><ol><li>"Prikaz koda stranice" je potreban samo da biste vidjeli glavnu kombinaciju stranice. U osnovi, ovo je struktura stranice (bez dodatnih modela u obliku CSS datoteka i drugih dodataka koji su ostali u folderu kreatora stranice). Ova struktura nije prikladna za kreiranje vlastite stranice copy-pastingom, ali će vam omogućiti da vidite šta je tačno programer uradio i kojim redosledom, tako da je sajt u pretraživaču Google Chrome imao takav eksterni dizajn.</li>
<li>"Prikaz koda" prikazuje detaljnu strukturu koja naglašava sva područja na koja se to odnosi na stranici. Ako zadržite pokazivač miša iznad određenog koda liste, on će označiti stavku na web lokaciji kojoj pripada.</li>
<li>Pregledanje koda stranice otvara se u posebnom pretraživaču bez mogućnosti uređivanja. Odnosno, pogodan je samo za kopiranje i čitanje koda stranice. Ali to je jednako korisna karakteristika.</li>
<li>“View Code” je promjenjiv i možete uređivati bilo koji element na način koji vama odgovara. Naravno, sve ove promjene će “živjeti” dok se stranica ne osvježi, ali ponekad je zabavno popeti se kroz te postavke i jednostavno shvatiti čemu služi ova ili ona vrijednost i šta će se dogoditi ako je promijenite. Ne biste trebali pretpostaviti da ćete takvim radnjama naštetiti sebi ili web stranici - ove promjene utječu samo na kod vašeg Google Chromea i ne idu na internet.</li>
</ol><h2><span>S obzirom na pitanje kako vidjeti kod elementa</span></h2><p>Ako ćemo odgovoriti na takvo pitanje, onda se nameće samo varijanta sa primjerom. Jer vrlo je teško postati osoba koja razumije ovu temu (web developer) u jednom članku, ali je mnogo lakše pokazati primjerom kako bi se pitanje riješilo.</p> <p>Funkcionalnost koda elementa je vrlo široka, pa uzimamo jednu od riječi na web stranici preglednika Google Chrome. Htjeli smo razmotriti koje su ključne riječi (u kodu će biti napisane kao "ključne riječi") korištene za našu stranicu. Da bismo to učinili, izvodimo sljedeći algoritam:</p><h2><span>Drugi načini korištenja ove funkcije u pregledniku Google Chrome</span></h2><p>Općenito, nastavljajući s odgovorom na pitanje kako gledati na kod elementa i zašto je potreban, treba navesti njegove funkcije. Naime, zahvaljujući mogućnosti pregleda koda elementa bilo koje stranice u pregledniku Google Chrome, možemo:</p><ul><li>Pogledajte strukturu sajta počevši od glave (“zaglavlje sajta”) i završavajući sa end (konačna komanda bilo kog programa);</li>
<li>Pregledajte sve funkcije sajta, i to: linkove ka drugim sajtovima, dodatne module sa eksternih sajtova i prisustvo ugrađenih brojača za prikupljanje raznih informacija;</li>
<li>Saznajte da li je kopiranje sa stranice zabranjeno ili ne;</li>
<li>Kod će zabilježiti sve linkove na druge stranice stranice, kao i njihov dizajn i naknadne radnje nakon klika na njih.</li>
</ul><blockquote><p>Ovo je daleko od potpune liste. Ali treba podsjetiti da je bez posebnog znanja gotovo nemoguće "pročitati" kod Google Chrome stranice, a primljeni podaci praktički nisu potrebni običnom korisniku.</p>
</blockquote><h2><span>Stavka "Prikaži šifru elementa" ne radi</span></h2><p>Odmah treba reći da će svaka stranica imati otvoren pristup kodovima elemenata. Odnosno, čak i najpopularnije i najskuplje stranice će biti otvorene za pregled njihovog koda. Stoga, ako stavka u pregledniku Google Chrome nije aktivna ili daje grešku, to ima sljedeće moguće razloge:</p><ul><li>Korisnički profil je oštećen;</li>
<li>Prisutnost zlonamjernog softvera na računaru;</li>
<li>Blokiranje određenom ekstenzijom radi povećanja performansi (čak i ovo može biti).</li>
</ul><h2><span>Popravljanje oštećenog korisničkog profila</span></h2><p>Da biste kreirali novi profil, morate ukloniti stari sa svog računara. Da biste to učinili, učinite sljedeće:</p><ol><li>Zatvorite Google Chrome i pokrenite ugrađeni Windows Explorer pretraživač.</li>
<li>Unesite sljedeću naredbu u adresnu traku: %LOCALAPPDATA%\Google\Chrome\User Data\.</li>
<li>Kada se direktorij otvori, potražite folder “Default” i dodajte “Backup” u njegovo ime da biste dobili sljedeće: “Backup Default”.</li>
<li>Sada, nakon novog pokretanja Chrome pretraživača, biće kreiran novi profil.</li>
</ol><h2><span>Uklanjanje zlonamjernog softvera ili njegovih ostataka</span></h2><p>Ako nam novi profil nije dao pristup kodu elementa stranice i još uvijek vidimo grešku, trebali bismo učiniti sljedeće:</p><ol><li>Otvorite Windows komandnu liniju (Pokreni) i upišite "cmd" u nju.</li>
<li>Unesite sljedeću naredbu u red: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".</li>
<li>Nakon potvrde akcije, ubacujemo ovo: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".</li>
<li>Sada "gpupdate /force" (bez navodnika).</li>
</ol><p>Ako je sve urađeno ispravno, nakon ponovnog pokretanja računara, 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 čarobnjaka koji olakšavaju život pri postavljanju web stranice. Počnimo s webmaster konzolom u Google Chromeu. I prijeđimo na pitanja koja se najčešće postavljaju kod webmastera tijekom izgleda web stranice.</p>
<p>Da biste došli do konzole, otvorite svoju web lokaciju u Google Chrome-u, kliknite desnim tasterom miša bilo gdje na web stranici i odaberite Prikaži kod stranice iz kontekstnog padajućeg izbornika ili na određenom elementu za istraživanje odabirom View Code elementa.</p>
<p>Na vrhu ćete imati nekoliko kartica. Danas ćemo govoriti o kartici "Elementi". <b>,
</b> koji predstavlja elemente web stranice sa oznakama za isticanje, svojstvima, isticanjem ugniježđenja elemenata, predstavljanjem hijerarhije elemenata u DOM stablu (nagoveštaj na dnu, od osnovnog roditelja do trenutnog koji se ispituje), mogućnošću uređivanja elemente, listu njihovih svojstava, razmotrite pretragu po elementima, a takođe hajde da se upoznamo sa pregledom css stilova povezanih sa elementima, itd.</p>
<h3>Kako vidjeti sve stilove koji su povezani s određenim elementom? Koji je sada u upotrebi? U kojim su fajlovima?</h3>
<p>Dakle, nema ništa lakše! Otvaramo preglednik Google Chrome, otvaramo našu web stranicu - izvor pitanja, desnim klikom na željeni element ako je vidljiv u kontekstu stranice i odabiremo stavku "Prikaži kod elementa" u kontekstnom izborniku.</p>
<p>Na dnu imamo konzolu sa istaknutom karticom na lijevoj strani " Elementi" I svi stilovi povezani s elementom na desnoj strani, gdje: <b>Computed Styles</b>- ovo su generalni "sumarni" stilovi koji su elementu dodijeljeni iz css pravila i postavki pretraživača korisnika (njegovog okruženja), a pritom se tabulator skuplja.</p>
<p>Ali nas zanima kartica “Stilovi” koja se nalazi ispod nje, a koja redom navodi sve stilove koji su dodijeljeni elementu, kao i fajlove u kojima su ta pravila specificirana za ovaj element prema njegovom tipu, ID-u, klasi, imenu, svojstvu, atribut itd. U isto vrijeme, ako je css pravilo precrtano, tada je ponovo definirano ranije/sljedeće (što olakšava praćenje koje od css pravila je prioritetno i primjenjuje se na element u ovom slučaju).</p>
<p>Ispod konzole je linija koja prikazuje element u hijerarhiji dokumenta, što vam lako omogućava da vidite cijelu listu nadređenih elemenata od korijena do odabranog elementa. Nešto kao prezle.</p>
<h3>Html oznaka nije vidljiva u kontekstu stranice? Ili trebate pronaći sve oznake, na primjer, prema određenoj klasi, imenu, svojstvu, tipu?</h3>
<p>Otvorite stranicu u Google Chromeu, kliknite desnim tasterom miša, pozovite kontekstni meni, odaberite <b>«
</b> Pogledajte kod stranice <b>»
</b>. Istovremeno pritisnite kombinaciju tipki "CTRL + F", unesite frazu koja nam je potrebna ( <b>Na primjer</b><i>:
</i><i>klasa = "</i><i>padding"</i>) i kretati se kroz listu pronađenih rezultata, istovremeno pregledavajući sve stilove povezane sa željenim elementima na desnoj strani stranice.</p>
<h3>Kako pogledati html kod elementa (elemenata) učitanih dinamički (na primjer: od strane Ajaxa)</h3>
<p>Čeka se da se stranica učita u Google Chrome. Izvodimo potrebne radnje da Ajax radi. Desnom tipkom miša kliknemo na preuzete podatke, u kontekstnom izborniku odaberemo "Prikaži kod elementa", pregledamo rezultat u konzoli na kartici "Elementi" s lijeve strane.</p>
<h3>Pogledajte promjene stila css u realnom vremenu</h3>
<p>Usput, također je zgodno promatrati, ako je potrebno, koji su stilovi dodijeljeni elementu u hodu, na primjer, prilikom pomicanja kroz galeriju i drugih događaja tajmera. Svi stilovi dodijeljeni putem javascripta u realnom vremenu bit će prikazani u svojstvu <b>stil</b> odabrani element u prozoru na kartici Elementi.</p>
<h3>Interaktivni prikaz uticaja css pravila na prezentaciju html oznaka</h3>
<p>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 pomjeriti kursor miša preko određenog css svojstva, omogućiti ga iskačućim kvačicom na desnoj strani ili ga onemogućiti tako što ćete poništiti zastavicu i pregledati rezultirajući rezultat na stranici.</p>
<h3>Mijenjamo strukturu prezentacije html elemenata u hodu (pravo u pretraživaču)</h3>
<p>Dakle, već smo naučili kako istražiti strukturu web dokumenta u Google Chrome-u, a sada pogledajmo elemente uređivanja u hodu. Idemo do konzole na bilo koji način koji nam odgovara. Na kartici "Elementi" pronalazimo željeni element, kliknemo desnim tasterom miša na njega i tako pozivamo skočni kontekstni meni:</p>
<ul><li><b>Dodaj atribut</b>- Dodaje atribut navedenom elementu. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. <b>na primjer</b>: Hajde da napišemo name="itemImage", koji će odmah biti dodan našem elementu.</li>
<li><b>Uredi atribut</b>– ako desnom tipkom miša kliknete na atribut elementa, stavka postaje dostupna <b>edit</b><b>atribut</b>. Kliknite, uredi.</li>
</ul><p><b>Primjer upotrebe:</b> zaboravili smo lozinku sačuvanu pod zvjezdicama u Google Chromeu (ako je lozinka sačuvana u ovom pretraživaču). Kliknite desnim tasterom miša na element sa lozinkom, kliknite na "View Element Code" <b>,
</b> u konzoli na lijevoj strani kartice <b>Elementi</b> desnim klikom na type="password" atribut, levim klikom na <b>Uredi</b><b>atributi,</b> promijeniti atribut <i>type="</i><i>lozinka"</i> na <i>type="</i><i>tekst"</i>, a ovdje već imamo istu lozinku u obliku teksta umjesto zvjezdica.</p>
<ul><li><b>Uredi</b><b>html</b>- desni klik na element u konzoli <b>Elementi</b>, izaberite <b>Uredi</b><b>html,</b> promijenite kod po svom ukusu.</li>
<li><b>Kopiraj</b><b>as</b><b>HTML</b>- kopirajte dio HTML-a koji nam je potreban za dalje istraživanje, recimo, u bilježnicu ili u druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vreme.</li>
<li><b>Kopiraj</b><b>XPATH</b>– kopira XPATH prikaz strukture iz korijena roditeljskog elementa u odabrani element.</li>
<li><b>Izbriši</b><b>čvor</b>– ako trebate ukloniti trenutno odabrani element i svu njegovu djecu iz konteksta web stranice i vidjeti rezultat.</li>
<li><b>Riječ</b><b>zamotati</b>- će prikazati prikaz web stranice u kontekstu konzole <b>Elementi</b>čitljiviji.</li>
</ul><p>U sljedećim člancima nastavit ćemo gledati alate za webmastere, a posebno ćemo se upoznati s ostalim karticama alata za webmastere u <b>google chrome</b>, a također razmotrite otklanjanje grešaka u javascriptu koristeći različite pretraživače</p>
<p>". Ista stavka se nalazi iu kontekstualnom meniju koji, ako kliknete desnim tasterom miša na tekst <b>stranice</b>. Možete koristiti i prečicu na tastaturi CTRL + U. Mozilla FireFox ne koristi eksterne programe - original <b>kod</b> <b>stranice</b> sa isticanjem sintakse će se otvoriti u posebnom prozoru pretraživača.</p> <p>U Internet Exploreru kliknite na meni Datoteka i odaberite Uredi u Notepad-u. Umjesto naziva Notepad može se napisati još jedno, u postavkama pretraživača ste dodijelili da vidite original <b>kod</b> a. On Click <b>stranice</b> Desnim klikom otvara se kontekstni meni, koji takođe ima stavku koja vam omogućava da otvorite izvor <b>kod</b> <b>stranice</b> u eksternom programu - "Prikaži HTML- <b>kod</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 pretraživaču Opera otvorite meni, idite na odjeljak "Stranica" i imat ćete priliku odabrati stavku "Izvor" u pododjeljku "Alati za razvoj". <b>kod</b>” ili stavka „Inicijal <b>kod</b> okvir". Prečice CTRL+U i CTRL+SHIFT+U su dodijeljene ovom odabiru, respektivno. U kontekstualnom meniju u prilogu kliknite <b>stranice</b> desnim klikom, tu je i stavka "Izvor <b>kod</b>". Opera izvor <b>stranice</b> u eksternom programu koji je dodijeljen u OS-u ili u postavkama pretraživača 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>Google Chrome pretraživač bez ikakve sumnje ima najbolju organizaciju izvornog pretraživača. <b>kod</b> a. Desnim klikom miša možete odabrati View <b>kod</b> a <b>stranice</b>” i tada će se izvorni kod sa isticanjem sintakse otvoriti u posebnoj kartici. Ili možete odabrati u istom meniju liniju "Prikaz <b>kod</b> element" i na istoj kartici će se otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS - <b>kod</b> element <b>stranice</b>. Pretraživač će reagovati na pomeranje kursora preko redova <b>kod</b> i, isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a <b>kod</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">Top Related Articles</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/skachat-temu-na-kompyuter-windows-7-apple-krasochnaya-tema-pod-nazvaniem.html">
<div class="img_container"><img src="/uploads/b465156eff8ad2170c24c3ddd7625a8a.jpg" border="0" alt="Šarena tema pod nazivom "Apple" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Šarena tema pod nazivom "Apple</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/srochnyi-bezlimit-na-mts-neskolko-sposobov-kak-otklyuchit.html">
<div class="img_container"><img src="/uploads/472a35a253a69c8d92a021fa47ff4e93.jpg" border="0" alt="Nekoliko načina da onemogućite neograničeni internet na svom telefonu sa Megafona, Beelinea i MTS-a koristeći SMS, poziv operateru ili USSD komande" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Nekoliko načina da onemogućite neograničeni internet na svom telefonu sa Megafona, Beelinea i MTS-a koristeći SMS, poziv operateru ili USSD komande</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/obzor-xiaomi-mi-mix-bezramochnyi-smartfon-eto-udobno-xiaomi-pokazala.html">
<div class="img_container"><img src="/uploads/eb10df6f69c0a05f79119cb68ef12392.jpg" border="0" alt="Xiaomi je pokazao vodeći pametni telefon bez okvira i"убийцу" MacBook Мультимедиа и связь" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Xiaomi je pokazao vodeći pametni telefon bez okvira i "ubojiti" MacBook</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/bs/category/programs/">Programi</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/safety/">Sigurnost</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/iron/">Iron</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/vkontakte/">U kontaktu sa</a></li>
<li class=""><a href="https://bumotors.ru/bs/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="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" 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">© 2022 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.</span>
</div>
</div>
</div>
</div>
</body>
</html>