Kako si ogledate vir HTML v Google Chromu

Preberite, kako je bilo spletno mesto zgrajeno z ogledom izvorne kode

Ko sem prvič začel svojo kariero kot spletni oblikovalec, sem se tako veliko naučil s pregledom dela drugih spletnih oblikovalcev, ki sem jih občudoval. V tem nisem sam. Ne glede na to, ali ste novi v spletno industrijo ali izkušeni veteran, si lahko ogledujete vir HTML na različnih spletnih straneh, kar boste verjetno storili večkrat v času vaše kariere.

Za tiste, ki so novosti v spletnem oblikovanju, je ogled izvorne kode spletnega mesta eden najpreprostejših načinov, kako ugotoviti, kako se nekatere stvari izvajajo, tako da se lahko učite iz tega dela in začnete uporabljati določeno kodo ali tehnike v svojem delu. Kot vsak spletni oblikovalec, ki dela danes, še posebej tisti, ki so bili v njem od zgodnjih dni v industriji, in to je varna stava, ki so jim povedali, da so se naučili HTML preprosto z ogledom vira spletnih strani, ki so jih videli in so bili zaintrigirani z. Poleg branja knjig za oblikovanje spletnih strani ali obiskovanja strokovnih konferenc je pregledovanje izvorne kode spletnega mesta odličen način za začetnike za učenje HTML.

Več kot le HTML

Ena stvar, ki jo je treba zapomniti, je, da so lahko izvorne datoteke zelo zapletene (in bolj zapletena spletna stran, ki si jo ogledujete, bolj zapletena je, da je koda spletnega mesta verjetno). Poleg strukture HTML, ki sestavlja stran, ki jo pregledujete, bo tudi CSS (kaskadni listi slogov), ki narekujejo vizualni videz tega spletnega mesta. Poleg tega bodo številne spletne strani danes vključevale datoteke skript skupaj z HTML-jem.

Obstaja verjetno, da je vključenih več scenarij datotek, v resnici, vsak, ki napaja različne vidike mesta. Iskreno, izvorno kodo spletnega mesta se lahko zdi pretežno, še posebej, če ste novi za to. Ne razočarajte se, če ne morete ugotoviti, kaj se dogaja s to spletno stranjo takoj. Pregledovanje vira HTML je le prvi korak v tem procesu. Z malo izkušnjami boste začeli bolje razumeti, kako se vsi ti elementi ujemajo skupaj, da ustvarite spletno mesto, ki ga vidite v vašem brskalniku. Ko boste bolje spoznali kodo, boste lahko iz njega izvedeli več in se vam ne zdi zastrašujoče.

Torej, kako si ogledate izvorno kodo spletnega mesta? To storite s pomočjo brskalnika Google Chrome.

Korak za korakom Navodila

  1. Odprite spletni brskalnik Google Chrome (če nimate nameščenega programa Google Chrome, to je brezplačen prenos).
  2. Pojdite na spletno stran, ki jo želite pregledati .
  3. Z desno tipko miške kliknite stran in si oglejte meni, ki se prikaže. V tem meniju kliknite Prikaži vir strani .
  4. Izvorna koda za to stran bo zdaj prikazana kot nov zavihek v brskalniku.
  5. Lahko pa tudi z bližnjicami na tipkovnici CTRL + U na računalniku odprete okno s prikazano izvorno kodo spletnega mesta. Na Macu je ta bližnjica Command + Alt + U.

Orodja za razvijalce

Poleg možnosti Googlovega brskalnika, ki je na voljo s preprostim pogledom na stran , lahko izkoristite tudi njihova odlična orodja za razvijalce, da se še globlje kopirate na spletno mesto. Ta orodja vam omogočajo, da ne vidite samo HTML, temveč tudi CSS, ki velja za ogled elementov v tem dokumentu HTML.

Če želite uporabljati orodja za razvijalce za Chrome:

  1. Odprite Google Chrome .
  2. Pojdite na spletno stran, ki jo želite pregledati .
  3. Kliknite ikono s tremi vrsticami v zgornjem desnem kotu okna brskalnika.
  4. V meniju premaknite miško nad Več orodij in v meniju, ki se pojavi, kliknite orodja za razvijalce .
  5. S tem se odpre okno, ki prikazuje levo od podokna in ustrezno CSS na desni strani.
  6. Če pa z desno miškino tipko kliknete element na spletni strani in v pregledanem meniju izberete Pregled , se bodo v orodju za razvijalce Chrome pojavili in točen element, ki ste ga izbrali, bo poudarjen v HTML-ju z ustreznim CSS, ki je prikazano na desni strani. To je zelo koristno, če želite izvedeti več o tem, kako je bil ustvarjen določen del spletnega mesta.

Ali je ogled izvorne kode zakonite?

Z leti sem imel veliko novih spletnih oblikovalcev vprašanje, ali je sprejemljivo, da si ogledate izvorno kodo spletnega mesta in jo uporabite za svoje izobraževanje in končno za delo, ki ga opravljajo. Medtem ko kopiranje spletne strani na debelo in njegovo posredovanje kot svoje na spletnem mestu, zagotovo ni sprejemljivo, z uporabo te kode kot odskočna deska za učenje od dejansko, koliko napredovanj je v tej industriji.

Kot sem omenil na začetku tega članka, bi vam bilo težko najti delovnega spletnega strokovnjaka, ki danes ni izvedel nekaj, če si ogledujete vir spletnega mesta! Da, ogled izvorne kode mesta je zakonit. Dobro je uporabiti to kodo kot vir za gradnjo podobnega. Vnesite kodo, kot je, in jo izklopite, ko je vaše delo tam, kjer začnete naleteti na težave.

Na koncu se spletni strokovnjaki učijo drug od drugega in pogosto izboljšajo delo, ki ga vidijo in so navdihnjene, zato ne oklevajte, da si ogledate izvorno kodo spletnega mesta in jo uporabite kot učno orodje.