Dugo mi je opcija “pokaži izvorni kod stranice” bila beskorisna i nezanimljiva. Do sada učenje HTML-a na Codecademyju i izgled vlastitih stranica nije prerastao u moj novi hobi. Ovdje se postavilo pitanje: gdje pronaći stvarne slučajeve i posuditi zanimljiva rješenja za svoju "kasicu-prasicu"? Odgovor je bio neočekivano jednostavan, kao i sve genijalno: pogledajte izvorni kod stranice u Google Chromeu! Dijelim s vama svoje skromne nalaze.
Što je izvorni kod stranice
Ako i vi, poput mene, tek radite prve korake u HTML-programiranju, neće biti suvišno saznati koji je izvorni kod stranice.
Izvorni kod, također poznat kao HTML kod stranice, je tekst u jeziku za označavanje hiperteksta (HTML). Uključuje stvarni sadržaj stranice (tekst, tablice) i oznake. Potonje djeluju kao upute za preglednik: kako prikazati sadržaj, kakvu vrstu oblikovanja koristiti, gdje umetnuti hipervezu ili medijsku datoteku. Pa, za nas, programere početnike, izvorni kod je najbolji poligon: pronađemo zanimljivu stranicu i špijuniramo je, spremamo, koristimo uspješne fragmente. Kako?
Kako vidjeti izvorni kod na stranici preglednika Google Chrome
Pronađite stranicu koja vam se sviđa. Na primjer, zanimao me dizajn izbornika stranice. Postoje tri načina za otvaranje izvornog koda u pregledniku Google Chrome:
- Kliknite na ikonu izbornik u gornjem desnom kutu preglednika i odaberite stavku "Dodatni alati". Između ostalih, tu je i opcija "Pogledaj izvorni kod". Iskreno, rijetko koristim ovu metodu: puno nepotrebnih pokreta. Može se učiniti još lakšim.
- Pritisnite kombinaciju tipki Ctrl + U- otvara se novi prozor s izvornim kodom;
- Za ljubitelje kontekstnog izbornika: desnom tipkom miša kliknite stranicu i odaberite opciju "Prikaz koda stranice".
Nosili smo se sa zadatkom pregleda HTML koda stranice u pregledniku. Prijeđimo na najzanimljiviju fazu.
Kako urediti i spremiti izvorni kod
Da biste naučili kako izraditi web stranice, nije dovoljno pročitati tuđi HTML kod. Morate se igrati s njim, eksperimentirati, unositi promjene i provjeriti rezultat. Možete čak započeti sastavljanjem nekoliko dobrih primjera. Kako mogu urediti i spremiti izvorni kod?
Opcija 1. "Ručno"
Nakon što smo otvorili izvorni kod stranice, pozivamo kontekstni izbornik i odabiremo opciju "Spremi kao" i spremamo datoteku na tvrdi disk. Uređujemo datoteku u Notepadu ili Notepadu, spremamo promjene i otvaramo je putem preglednika. Rezultati naših promjena (dobri i loši) odrazit će se u prozoru preglednika.
Opcija 2. Za profesionalce
Kada se svaki dan "igrate" s izvornim kodom, proces "spremi - otvori - promijeni - spremi - provjeri" je zamoran. Za sebe sam pronašao rješenje u vidu instaliranja dodatka za Google Chrome – Firebug Lite. Omogućuje vam uređivanje i spremanje izvornog koda bez napuštanja prozora preglednika.
Potrebno je brzo pogledati sve promjene na samoj stranici, bez utjecaja na datoteke i kod stranice objavljene na Internetu. Na primjer, promijenite shemu boja bloka, pomaknite pokretni element itd.
Da bi to učinili, mnogi webmasteri koriste lokalne poslužitelje Denwer ili OpenServer, pokrećući punu kopiju stranice na svom računalu. Ova metoda je univerzalna i prikladna za profesionalce, uz pomoć nje možete provjeriti rad raznih skripti i dodataka, eksperimentirati s promjenom dizajna i uređivati sve datoteke web-mjesta, a nakon testa prenijeti odgovarajuće promjene izravno na web-mjesto.
Za korisnike koji su daleko od umjetnosti webmastera, preporučam korištenje preglednika u ove svrhe. Budući da koristim Chrome, dat ću upute sa snimkama zaslona za ovaj preglednik. Analogno, možete raditi s Opera, Yandex Browser, Mozilla Firefox i drugim preglednicima, princip njihovih alata je sličan.
Upute 1: kako vidjeti cijeli HTML kod web stranice u pregledniku
Otvorite potrebnu web stranicu za svoju web stranicu. Desnom tipkom miša kliknite na traženi element, pojavit će se kontekstni padajući izbornik preglednika s dostupnim naredbama:
Slika 1. Pregled cijelog HTML koda web stranice u pregledniku Chrome
Važno: Naredbe u padajućem izborniku mogu se razlikovati, na primjer, za aktivne elemente (veze, slike, videozapisi) i neaktivne (tekst, pozadina, dive):
Slika 2. Padajući izbornik preglednika Chrome
Stoga, ako niste pronašli potrebnu naredbu, samo kliknite desnom tipkom miša na drugom mjestu ili upotrijebite prečace preglednika.
Vraćajući se na sliku 1, prikazuje potrebnu naredbu za pregled cijelog HTML koda izvorne web stranice, zove se " Pogledajte kod stranice". Kliknemo na naredbu, otvorit će se nova kartica s punim kodom izvorne web stranice, veliki plus za sve - pogled je dostupan s isticanjem sintakse:
Slika 3. Fragment koda ove stranice
Ovaj alat je vrlo koristan za pronalaženje i uređivanje stavki koje tražite.
Alternativni načini za pregled cijelog HTML koda web stranice
Za brži pristup možete koristiti druge metode pozivanja ovog alata
- Na slici 1 također vidimo da je ova naredba dostupna preko tipkovničkog prečaca + ;
- Umetnite u adresnu traku preglednika view-source: mjesto umjesto moje domene, umetnite svoju adresu;
Obje metode su univerzalne i trebale bi raditi u svim preglednicima.
U početku će se nekima učiniti da ovo uopće nije nužan alat, ali pregledavanje cijelog HTML koda stranice odlično je za pronalaženje potrebnih elemenata u kodu, to mogu biti linkovi, oznake, meta oznake, atributi i ostali elementi.
Kombinacija prečaca +otvorite okvir za pretraživanje, u pregledniku Chrome pojavljuje se u gornjem desnom kutu:
Slika 3. Pretraživanje prema kodu web-mjesta
Nakon što unesete upit u obrazac za pretraživanje, zaslon će se pomaknuti na prvi pronađeni element, pomoću strelica možete se kretati između njih i odabrati traženi:
Slika 4. Pretraživanje po HTML kodu stranice
Uputa 2: kako pregledati i urediti HTML i CSS kod stranice u pregledniku Google Chrome
Sada za najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod stranice u pregledniku. zatim prenesite promjene u preglednik.
Takav koristan alat uvijek je dostupan u vašem pregledniku, eksperimentirajte s drugim naredbama koje će vam olakšati uređivanje stranice.
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 kod za jednostavan dokument koji sadrži osnovne oznake.
Primjer 4.1. Izvorni kod web stranice
Uzorak web stranice
Naslov
Prvi odlomak.
Drugi stavak.
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 Odabir dokumenta navedite datoteku example41.html. Web stranica prikazana na slici 4 otvorit će se u vašem pregledniku. 4.1.
Riža. 4.1. Primjer rezultata izvršenja
Elementsluži za označavanje vrste tekućeg dokumenta - DTD (definicija vrste dokumenta, opis vrste dokumenta). To je potrebno da bi preglednik razumio kako interpretirati trenutnu web stranicu, jer HTML postoji u nekoliko verzija, a postoji i XHTML (EXtensible HyperText Markup Language) koji je sličan HTML-u, ali se od njega razlikuje po sintaksi. Kako se preglednik ne bi "zbunio" i shvatio po kojem standardu prikazati web stranicu te je potrebno postaviti u prvom retku koda
.
Postoji nekoliko vrsta, razlikuju se ovisno o verziji HTML-a na koju ciljaju. Stol 4.1. navodi glavne vrste dokumenata s njihovim opisima.
Tab. 4.1. Važeći DTD-ovi | DOCTYPE |
Opis |
|---|
| HTML 4.01
|
|
|
Stroga HTML sintaksa. |
|
|
Prijelazna HTML sintaksa. |
|
|
Okviri se koriste u HTML dokumentu. |
| HTML 5
|
|
|
U ovoj verziji HTML-a postoji samo jedna vrsta dokumenta. |
| XHTML 1.0
|
|
|
Jaka XHTML sintaksa. |
|
|
Prijelazna XHTML sintaksa. |
|
|
Dokument je napisan u XHTML-u i sadrži okvire. |
| XHTML 1.1
|
|
|
Programeri XHTML 1.1 predviđaju da će on postupno zamijeniti HTML. Kao što možete vidjeti, ova definicija nema podjelu na tipove, budući da je sintaksa ista i poštuje jasna pravila. |
Razlika između strogih i prolaznih opisa dokumenata je različit pristup pisanju koda dokumenta. Strogi HTML zahtijeva strogo pridržavanje HTML specifikacije i neumoljiv je. Prijelazni HTML je "opušteniji" u pogledu nekih nedostataka u kodu, pa je ovaj tip u određenim slučajevima poželjniji.
Na primjer, u strogom HTML-u i XHTML-u, oznaka
može se izostaviti ili izostaviti u prijelaznom HTML-u. Istodobno, zapamtite da će preglednik u svakom slučaju prikazati dokument, bez obzira na to odgovara li sintaksi ili ne. Takva se provjera provodi pomoću validatora i prvenstveno je namijenjena programerima za praćenje pogrešaka u dokumentu.</p>
<p>U nastavku ćemo uglavnom koristiti strogu<!DOCTYPE>, osim ako nije drugačije navedeno. To će nam omogućiti da izbjegnemo uobičajene pogreške i naučimo nas pisati sintaktički ispravan kod.</p>
<p>Često je moguće pronaći HTML kod bez upotrebe<!DOCTYPE>, web stranica će i dalje biti prikazana u takvom slučaju. Međutim, može se dogoditi da se isti dokument prilikom korištenja u pregledniku prikazuje drugačije<!DOCTYPE>i bez toga. Osim toga, preglednici mogu prikazati takve dokumente na svoj način; kao rezultat toga, stranica će se "srušiti", tj. bit će prikazan na potpuno drugačiji način nego što to programer želi. Da biste izbjegli ovakve situacije, uvijek dodajte<!DOCTYPE>na početak dokumenta.</p><p>Označiti <html>definira početak HTML datoteke, unutar nje je zaglavlje ( <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 izravno na stranici, osim spremnika <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 koristeći meta tagove, 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 ima posla s UTF-8 kodiranjem (format transformacije Unicode), dodaje se ovaj niz.</p><p>
<title>Uzorak web stranice
Označiti
definira naslov web stranice, to je jedan od važnih elemenata dizajniranih za rješavanje mnogih problema. U operacijskom sustavu Windows tekst naslova se prikazuje u gornjem lijevom kutu prozora preglednika (slika 4.2).</p>
<p><img src='https://i2.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 preglednika</p>
<p>Označiti <title>je obavezan i mora biti prisutan u šifri dokumenta.</p><p>Obavezno dodajte završnu oznaku</head> kako bi označili da je naslovni blok dokumenta dovršen.</p><p>Tijelo dokumenta <body>dizajniran za smještaj oznaka i sadržaja web stranice.</p><p>
<h1>Naslov</h1>
</p><p>HTML nudi šest različitih razina tekstualnih naslova koji ukazuju na relativnu važnost odjeljka nakon naslova. Dakle, oznaka <h1>predstavlja najvažniji naslov prve razine i oznaku <h6>služi za označavanje naslova šeste razine i najmanje je značajan. Prema zadanim postavkama, naslov prve razine prikazuje se najvećim podebljanim slovima, naslovi sljedeće razine su manje veličine. Oznake <h1>...<h6>su blok elementi, uvijek počinju u novom retku, a nakon njih ostali elementi se prikazuju u sljedećem retku. Osim toga, ispred i iza naslova dodaje se razmak.</p><p>
<!-- Комментарий -->
</p><p>Neki tekst se može sakriti od prikaza u pregledniku tako da ga dodate komentarom. Iako korisnik neće vidjeti takav tekst, on će se i dalje prenositi u dokumentu, pa gledajući izvorni kod, možete pronaći skrivene bilješke.</p>
<p>Dakle, danas ćemo pogledati nekoliko korisnih alata za web majstora koji olakšavaju život izgledu web stranice. Počnimo s webmaster konzolom u Google Chromeu. I prijeđimo na pitanja koja se najčešće postavljaju kod web-mastera tijekom izgleda stranice.</p>
<p>Da biste došli do konzole, otvorite svoju web-lokaciju u Google Chromeu, kliknite desnom tipkom bilo gdje na web-stranici i odaberite Prikaži kod stranice iz kontekstnog padajućeg izbornika ili na određenu stavku za istraživanje odabirom View Code elementa " .</p>
<p>Na vrhu ćete imati nekoliko navedenih kartica. Danas ćemo govoriti o kartici "Elementi". <b>,
</b> koji predstavlja elemente web stranice s označavanjem oznaka, svojstava, isticanje ugniježđenja elemenata, predstavljanje hijerarhije elementa u DOM stablu (hint na dnu, od korijenskog roditelja do trenutno istraženog), mogućnost uredite elemente, popis njihovih svojstava, razmotrite pretragu po elementima i upoznajmo se s pregledom css stilova povezanih s elementima itd.</p>
<h3>Kako mogu vidjeti sve stilove koji su povezani s određenim elementom? Koji se sada primjenjuje? U kojim se datotekama nalaze?</h3>
<p>Dakle, ništa ne može biti lakše! Otvaramo preglednik Google Chrome, otvaramo našu stranicu - izvor pitanja, desnom tipkom miša kliknemo na željeni element, ako je vidljiv u kontekstu stranice, i iz kontekstnog izbornika odabiremo "Prikaži kod elementa".</p>
<p>Na dnu imamo konzolu s označenom karticom s lijeve strane "Elementi" i svim stilovima povezanim s elementom s desne strane, gdje: <b>Računalni stilovi</b>- to su opći stilovi "sažetka" koji su elementu dodijeljeni iz css pravila i postavki korisnikovog preglednika (njegova okolina), a kartica je sažeta.</p>
<p>Ali nas zanima kartica "Stilovi", proširena ispod nje, u kojoj su svi stilovi dodijeljeni elementu navedeni jedan po jedan, kao i datoteke u kojima su ta pravila za ovaj element naznačena njegovom vrstom, ID-om, klasi, ime, svojstvo, atribut itd... Istodobno, ako je css pravilo prekriženo, tada je ponovno definirano ranije/kasnije (što olakšava praćenje koje od css pravila ima prioritet i u ovom slučaju se primjenjuje na element).</p>
<p>Ispod konzole je linija koja prikazuje element u hijerarhiji dokumenta, lako vam omogućuje pregled cijelog popisa nadređenih elemenata od korijena do odabranog elementa. Nešto poput krušnih mrvica.</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 stranicu u Google Chromeu, kliknite desnom tipkom miša, otvorite kontekstni izbornik, 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>podstava "</i>) i kretati se kroz popis pronađenih rezultata, usput pregledavajući sve stilove povezane sa željenim elementima na desnoj strani stranice.</p>
<h3>Kako vidjeti html kod elementa (e) koji se dinamički učitavaju (na primjer: Ajax)</h3>
<p>Č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 "Prikaz koda elementa" iz kontekstnog izbornika, pregledajte rezultat u konzoli na kartici "Elementi" s lijeve strane.</p>
<h3>Pregledajte promjene u css stilovima 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 galerije i drugih događaja pomoću mjerača vremena. Svi stilovi dodijeljeni javascriptu u stvarnom vremenu bit će prikazani u svojstvu <b>stil</b> odabrani element u prozoru na kartici "Elementi".</p>
<h3>Pregled uživo učinka 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 pomicati pokazivač miša preko css-a koji je naveden u svojstvima, omogućiti ga pomoću skočne kvačice s desne strane ili ga onemogućiti poništavanjem zastavice i pregled rezultirajućeg rezultata na stranici.</p>
<h3>Promjena strukture prezentacije html elemenata u hodu (desno u pregledniku)</h3>
<p>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. Pronalazimo traženi element na kartici "Elementi", desnom tipkom miša kliknemo na njega i tako pozivamo skočni kontekstni izbornik:</p>
<ul><li><b>Dodajte atribut</b>- dodaje atribut za navedeni element. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. <b>na primjer</b>: napišimo name = "itemImage", koji će odmah biti dodan našem artiklu.</li>
<li><b>Uredi atribut</b>- ako desnom tipkom miša kliknete na atribut elementa, stavka postaje dostupna <b>Uredi</b><b>atribut</b>... Kliknite, uredite.</li>
</ul><p><b>Primjer upotrebe:</b> zaboravili smo lozinku spremljenu pod zvjezdicama u Google Chromeu (ako je lozinka spremljena u ovom pregledniku). Desnom tipkom miša kliknite na stavku sa lozinkom, kliknite na "Prikaži šifru artikla" <b>,
</b> u konzoli s lijeve strane u kartici <b>Elementi</b> kliknite na tip atributa = "lozinka" desnom tipkom miša, lijevom tipkom miša <b>Uredi</b><b>atribut,</b> mijenjanje atributa <i>tip = "</i><i>zaporka "</i> na <i>tip = "</i><i>tekst "</i>, a sada se umjesto zvjezdica prikazuje ista lozinka u obliku teksta.</p>
<ul><li><b>Uredi</b><b>html</b>- desnom tipkom miša kliknite na stavku u konzoli <b>Elementi</b>, odaberite <b>Uredi</b><b>html,</b> promijenite kod po svom ukusu.</li>
<li><b>Kopirati</b><b>kao</b><b>HTML</b>- kopirajte HTML dio koji nam je potreban za daljnje istraživanje, recimo, u bilježnicu ili u druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vrijeme.</li>
<li><b>Kopirati</b><b>XPAT</b>- kopira XPATH prikaz strukture iz korijena roditeljskog elementa u odabrani element.</li>
<li><b>Izbrisati</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>- prikazat će prikaz web stranice u kontekstu konzole <b>Elementi</b>čitljiviji.</li>
</ul><p>U sljedećim člancima nastavit ćemo razmatranje alata za webmastera, a posebno ćemo se upoznati s ostatkom kartica alata za webmastera u <b>Google Chrome</b>, a također razmislite o otklanjanju pogrešaka u javascriptu pomoću različitih preglednika</p>
<p>Programeri preglednika pobrinuli su se za praktičnost onih koji stvaraju web-mjesta koja se otvaraju u tim istim preglednicima, odnosno webmastera. Standardnim funkcijama dodali su alate za razvojne programere s kojima možete jednostavno otvoriti i <b>pogledajte izvorni kod stranice web-mjesta u pregledniku</b>: HTML, CSS, JavaScript (JS), dobiti razne korisne podatke o strukturi stranice, provesti njezinu tehničku analizu. Općenito, vidjeti puno korisnih stvari.</p>
<p>Naravno, ove alate ne koriste samo kreatori stranica za rad, već i obični korisnici koji uz izvorni kod mogu vidjeti razne korisne podatke.</p>
<p>U ovom ćete članku naučiti kako vidjeti izvorni kod stranice web-mjesta u pregledniku (kako otvoriti HTML, CSS, JavaScript kôd web-mjesta).</p>
<i>
</i>
<h2>Kako otvoriti izvorni kod stranice u pregledniku</h2>
<p>Postoje dva načina za otvaranje izvornog koda web stranice u pregledniku:</p>
<ol><li>Korištenje vrućih tipki;</li>
<li>Otvorite iz kontekstnog izbornika.</li>
</ol><p><b>Ctrl + U</b>- kombinacija vrućih tipki za prikaz izvornog koda cijele stranice web-mjesta u zasebnom novom prozoru. Standardno za sve preglednike: Google Chrome, Opera, Mozilla Firefox, Yandex preglednik, IE.</p>
<p>Također možete unijeti alate za razvojne programere na sljedeći način:</p>
<p>Kako biste brzo pronašli potrebni kod, riječ ili tekst na stranici, možete koristiti kombinaciju tipki prečaca za pretraživanje standardnu za sve preglednike: Ctrl + G.</p>
<p>Video upute:</p>
<p><span class="dmruvuTBwxg"></span></p>
<h2>Pogledaj šifru artikla | istražiti predmet | pregledati predmet</h2>
<p>Ako iznenada trebate pogledati ne cijeli izvorni kod, već prikazati samo njegov zasebni dio, neki odjeljak na stranici, tada prethodni alat neće raditi. Da biste to učinili, postoji još jedna funkcija u alatima za razvojne programere, o kojoj će biti riječi u nastavku.</p>
<p><b>Kako vidjeti kod elementa na stranici:</b></p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>Osim toga, možete koristiti tipkovničke prečace za brzi pristup pregledu elemenata.</p>
<p>Vruće tipke (tipke):</p>
<p>Google Chrome: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Opera: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Mozilla Firefox: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Yandex preglednik: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Nakon poduzetih radnji, izvorni kod web stranice otvorit će se u istom prozoru preglednika:</p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-HTML-CSS-kod-sayta.png' width="100%" loading=lazy loading=lazy><p>Sav HTML kod bit će u lijevom velikom stupcu. A CSS stilovi su na desnoj strani.</p>
<br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>Prednost ove metode je, naravno, što korisnik ima priliku mijenjati izvorni kod, uređivati stilove. Odnosno, možete uređivati stilove na stranici i vidjeti kako će izgledati s određenim stilovima, bez potrebe da odmah mijenjate datoteke koje se nalaze na hosting poslužiteljima. Da biste promijenili ili dodali programski kod, trebate dvaput kliknuti na željeni fragment ili područje. Naravno, popravak koda preglednika neće se primijeniti na hosting poslužitelje. Stoga ćete u budućnosti, u svakom slučaju, morati kopirati ovaj kod i upisati ga u datoteke.</p>
<p>Ovaj video tutorial daje detalje i pokazuje vam kako raditi s alatima za razvojne programere:</p>
<p><span class="DQMK8CuXkOg"></span></p>
<p>Upravo tako, online, izravno u pregledniku, možete vidjeti izvorni kod stranice stranice, dobiti osnovne podatke o HTML i CSS kodu, mijenjati ih i kopirati, bez potrebe da preuzimate datoteke ove stranice na svoje računalo.</p>
<p>Inače, neiskusni korisnici interneta koji su promijenili kod stranice i očekuju da će biti spremljen bit će razočarani. Uostalom, nakon osvježavanja stranice, sve promjene na njoj će nestati. Ovo nije dovoljno za hakiranje stranice 🙂</p>
<h2>Kako vidjeti izvorni kod na Android telefonu</h2>
<p>Također bih želio napomenuti da su alati za razvojne programere dostupni ne samo u desktop verziji preglednika, odnosno na računalima i prijenosnim računalima. Na telefonima i tabletima (Android, IOS) također možete vidjeti izvorni kod.</p>
<p>Da biste to učinili, dodajte prefiks izvora prikaza URL-u provjerene stranice:</p>
<p>Na primjer:</p>
<p>view-source: https: // site / turbo-rezhim-opera /</p>
<p><span class="N9JyJMmIZr8"></span></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">Vrhunski povezani članci</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/hr/odin-iz-glavnyh-priznakov-vzloma-kompyutera-kak-opredelit-chto.html">
<div class="img_container"><img src="/uploads/76867071226cb3b7967da54b4b9e5f9b.jpg" border="0" alt="Kako znati je li vaše računalo hakirano" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kako znati je li vaše računalo hakirano</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/hr/kak-otkalibrovat-i-nastroit-monitor-v-domashnih-usloviyah-kalibrovka.html">
<div class="img_container"><img src="/uploads/f5dd0761393cfad70766137078d4928b.jpg" border="0" alt="Kako kalibrirati i postaviti svoj monitor kod kuće" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kako kalibrirati i postaviti svoj monitor kod kuće</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/hr/kalibrovka-ekrana-kak-otkalibrovat-svoi-monitor-na-windows-ili.html">
<div class="img_container"><img src="/uploads/fae86757c8fdd585ebf5395742578324.jpg" border="0" alt="Kako kalibrirati svoj monitor na Windows ili Mac" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kako kalibrirati svoj monitor na Windows ili Mac</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/">Pogreš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">© 2021 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.</span>
</div>
</div>
</div>
</div>
</body>
</html> 