Saznajte kako je web stranica izrađena gledanjem izvornog koda
Kada sam počeo svoju karijeru kao web dizajner, toliko sam naučio pregledavajući rad drugih web dizajnera kojima sam se divio. Nisam sam u ovome. Bilo da ste novi u web industriji ili iskusan veteran, gledanje HTML izvora različitih web stranica je nešto što ćete vjerojatno učiniti mnogo puta tijekom vaše karijere.
Za one koji su novi u web dizajnu, gledanje izvornog koda web mjesta jedan je od najlakših načina da vidite kako se određene stvari rade kako biste mogli naučiti iz tog posla i početi koristiti određeni kôd ili tehnike u svom radu. Kao i svaki web dizajner koji rade danas, posebno onima koji su bili u njemu od ranih dana industrije, a to je sigurno kladiti se da vam oni kažu da su naučili HTML jednostavno pregledavajući izvor web stranica koje su vidjeli i koji su bili zainteresirani po. Uz čitanje knjiga izrade web stranica ili pohađanje stručnih skupova , gledanje izvornog koda web mjesta odličan je način za početnike da nauče HTML.
Više nego samo HTML
Jedna stvar koju trebate zapamtiti je da izvorne datoteke mogu biti vrlo komplicirane (i složeniji web mjesto koje pregledavate, složeniji je kod tog mjesta vjerojatno). Uz HTML strukturu koja čini stranicu koju pregledavate, bit će i CSS (kaskadni stilski listovi) koji diktiraju vizualni izgled tog web mjesta. Osim toga, mnoge web stranice danas će uključivati skriptne datoteke uključene zajedno s HTML-om.
U stvari, vjerojatno će biti uključene više skriptnih datoteka, a svaka od njih potiče različite aspekte web mjesta. Iskreno, izvorni kod web-lokacije može se činiti neodoljiv, pogotovo ako ste novi. Nemojte se frustrirati ako ne možete shvatiti što se odmah događa s tom web lokacijom. Pregled HTML izvora samo je prvi korak u tom procesu. Uz malo iskustva, početi ćete bolje razumjeti kako se svi ti dijelovi uklapaju kako bi stvorili web stranicu koju vidite u svom pregledniku. Kako se bolje upoznajete s kodom, moći ćete saznati više od njega i neće vam izgledati zastrašujuće.
Pa kako vidite izvorni kôd web stranice? Evo korak-po-korak upute za to pomoću preglednika Google Chrome.
Korak po korak upute
- Otvorite web preglednik Google Chrome (ako nemate instaliran Google Chrome, to je besplatno preuzimanje).
- Idite na web stranicu koju želite pregledati .
- Desnom tipkom miša kliknite stranicu i pogledajte izbornik koji će se pojaviti. Iz tog izbornika kliknite Prikaži izvor stranice .
- Izvorni kôd za tu stranicu sada će se pojaviti kao nova kartica u pregledniku.
- Alternativno, možete koristiti tipkovničke prečace CTRL + U na računalu da biste otvorili prozor s prikazanim izvornim kodom web mjesta. Na Mac računalu ovaj prečac je Command + Alt + U.
Razvojni alati
Uz jednostavnu mogućnost prikaza izvora stranice koju nudi Google Chrome, možete iskoristiti i svoje odlične alate za razvojne programere kako biste iskoristili još dublje na web mjestu. Ti će vam alati omogućiti da ne samo da vidite HTML, već i CSS koji se odnosi na elemente prikaza u tom HTML dokumentu.
Da biste upotrebljavali Chromeove alate za razvojne programere:
- Otvorite Google Chrome .
- Idite na web stranicu koju želite pregledati .
- Kliknite ikonu s tri retka u gornjem desnom kutu prozora preglednika.
- Na izborniku držite pokazivač miša iznad Više alata, a zatim na alatu za prikaz koji će se prikazati kliknite Alati za razvojne programere .
- Otvorit će se prozor koji prikazuje izvorni HTML kôd s lijeve strane okna i pripadajućeg CSS-a s desne strane.
- Alternativno, ako desnom tipkom miša kliknete element na web stranici i odaberete opciju Pregledaj iz izbornika koji će se prikazati, pojavit će se Chromeovi alati za razvojne programere, a točan element koji ste odabrali bit će istaknut u HTML-u s odgovarajućim CSS prikazanim udesno. Ovo je super korisno ako želite saznati više o tome kako je izrađen određeni dio web mjesta.
Je li izvorni kod pregleda pravni?
Tijekom godina imam mnogo novih web dizajnera postavlja pitanje je li prihvatljivo gledati izvorni kod web mjesta i koristiti je za njihovo obrazovanje i naposljetku za posao koji rade. Dok kopirate kôd web-lokacije za veleprodaju i šaljete ga kao svoju na web-lokaciji, zasigurno nije prihvatljivo, upotrebljavajući taj kôd kao odskočnu dasku za učenje je zapravo koliko je napredaka napravljeno u ovoj industriji.
Kao što sam spomenuo na početku ovog članka, bilo bi teško pronaći profesionalnog web stručnjaka koji još nije naučio nešto gledanjem izvora web mjesta! Da, gledanje izvornog kôda stranice legalno je. Korištenje tog koda kao resursa za izgradnju sličnog je također u redu. Uzimanje koda kao-je i njegovo gašenje kao posao gdje se počinjete naići na probleme.
Na kraju, web profesionalci uče jedni od drugih i često poboljšavaju posao koji vide i nadahnjuju, stoga ne ustručavajte se pogledati izvorni kôd web mjesta i upotrijebiti ga kao alat za učenje.