Saznajte kako je web stranica izgrađena gledanjem njegovog izvornog koda
Kada sam prvi put započeo karijeru kao web dizajnera, toliko sam saznao tako što sam pregledao rad drugih web dizajnera kojima sam divio. Nisam sam u ovome. Bilo da ste novi u web industriji ili iskusni veteran, gledanje HTML izvora na različitim web stranicama je nešto što ćete vjerovatno učiniti mnogo puta u toku vaše karijere.
Za one koji su novi u web dizajnu, pregled izvornog koda sajta je jedan od najjednostavnijih načina da vidite kako se određene stvari rade tako da možete saznati od tog posla i početi koristiti određeni kod ili tehnike u svom poslu. Kao i svaki web dizajner koji radi danas, posebno onih koji su bili u njemu od ranih dana industrije, i to je sigurna opklada koju oni kažu da su naučili HTML jednostavno gledajući izvor web stranica koje su videli i bili su zaintrigirani by. Pored čitanja knjiga za web dizajn ili prisustvovanje profesionalnim konferencijama , pregled izvornog koda sajta je odličan način za početnike da uče HTML.
Više od HTML-a
Jedna stvar koju treba zapamtiti je da izvorni fajlovi mogu biti vrlo komplikovani (i što je složenija web stranica koju gledate, to će biti složeniji kod ovog sajta). Pored HTML strukture koja čini stranicu koju pregledate, takođe će biti CSS (kaskadni listovi stilova) koji diktiraju vizuelni izgled tog sajta. Pored toga, mnoge web stranice danas će uključivati datoteke skripta uključene zajedno sa HTML-om.
Verovatno će biti uključene više skriptnih datoteka, ustvari svako ko napaja različite aspekte sajta. Iskreno, izvorni kod sajta može da izgleda ogromno, pogotovo ako ste novi za to. Nemojte biti frustrirani ako ne možete da shvatite šta se dogadja s tim sajtom odmah. Pregled HTML izvora je samo prvi korak u ovom procesu. Uz malo iskustva, počećete da bolje razumete kako se svi ovi delovi uklapaju zajedno kako biste kreirali veb stranicu koju vidite u vašem pregledaču. Pošto ste upoznati sa kodom, moći ćete da saznate više od toga i neće vam izgledati zastrašujuće.
Pa kako vidite izvorni kod web stranice? Evo uputstava korak po korak za to pomoću Google Chrome pregledača.
Korak po korak Upute
- Otvorite Google Chrome veb pregledač (ako nemate instaliran Google Chrome, ovo je besplatan download).
- Idite na web stranicu koju želite pregledati .
- Desnim tasterom miša kliknite na stranicu i pogledajte meni koji se pojavljuje. Iz tog menija kliknite View source source page .
- Izvorni kod za tu stranicu sada će se pojaviti kao novi jezičak u pregledaču.
- Alternativno, takođe možete koristiti prečice na tastaturi CTRL + U na računaru da biste otvorili prozor sa prikazanim izvornim kodom sajta. Na Mac-u, ova prečica je Command + Alt + U.
Alatke za razvoj
Pored jednostavne mogućnosti pretraživanja stranice koja Google Chrome nudi, takođe možete iskoristiti njihove odlične Alatke za razvijanje da biste iskopali još dublje u web lokaciju. Ovi alati će vam omogućiti ne samo da vidite HTML, već i CSS koji se primenjuje za prikazivanje elemenata u tom HTML dokumentu.
Korišćenje Chrome-ovih alata za razvijanje:
- Otvorite Google Chrome .
- Idite na web stranicu koju želite pregledati .
- Kliknite ikonu sa tri linije u gornjem desnom uglu prozora pregledača.
- Iz menija postavite mišem na dugme Više alata, a zatim u meniju koji se pojavljuje, kliknite na alatke za razvijanje .
- Ovo će otvoriti prozor koji prikazuje HTML izvorni kôd na lijevoj strani panela i odgovarajuće CSS s desne strane.
- Alternativno, ako desni kliknete na element u veb stranici i izaberite Inspect iz menija koji se pojavljuje, Chrome-ov alat za razvijanje će se pojaviti i tačan element koji ste odabrali će biti označen u HTML-u sa odgovarajućim CSS prikazanim udesno. Ovo je od velike pomoći ako želite da saznate više o tome kako je napravljen jedan određeni deo sajta.
Da li je izvorni kod zakonit?
Tokom godina, imao sam mnogo novih web dizajnera da se pitam da li je prihvatljivo gledati izvorni kod sajta i koristiti ga za svoje obrazovanje i na kraju za posao koji rade. Prilikom kopiranja veletrgovine sajta i prenošenja kao svoje na sajt sigurno nije prihvatljivo, koristeći taj kod kao odskočnu dasku za učenje, zapravo je koliko napredaka je napravljeno u ovoj industriji.
Kao što sam pomenuo na početku ovog članka, teško bi bilo da pronađete profesionalnog web profesionalca koji nije nešto naučio gledanjem izvora sajta! Da, pregled izvornog koda sajta je legalan. Korištenje tog koda kao resursa za izgradnju sličnog je takođe dobro. Uzimanje koda kao i ispuštanje dok je vaš posao gde počinjete da se suočite sa problemima.
Na kraju, web profesionalci uče jedni od drugih i često poboljšavaju posao koji oni vide i inspirisani, pa nemojte oklevati da pogledate izvorni kod sajta i da ga koristite kao alat za učenje.