Hvernig á að skoða HTML-uppspretta í Google Chrome

Lærðu hvernig vefsvæði var byggt með því að skoða kóðann

Þegar ég byrjaði fyrst ferilinn minn sem vefhönnuður, lærði ég svo mikið með því að skoða verk annarra vefhönnuða sem ég dáðist að. Ég er ekki einn í þessu. Hvort sem þú ert nýr í vefmiðluninni eða vanmetið öldungur, að skoða HTML-uppsprettu mismunandi vefsíður er eitthvað sem þú ert líklega að gera mörgum sinnum á meðan á ferli þínum stendur.

Fyrir þá sem eru nýir við vefhönnun, er að skoða kóðann á síðuna sem er ein auðveldasta leiðin til að sjá hvernig ákveðnar hlutir eru gerðar þannig að þú getir lært af því verki og byrjað að nota ákveðna kóða eða tækni í eigin vinnu. Eins og allir vefur hönnuðir vinna í dag, sérstaklega þeir sem hafa verið í það síðan upphafsdagar iðnaðarins og það er öruggt veðmál sem þeir segja þér að þeir lærðu HTML einfaldlega með því að skoða uppruna vefsíðna sem þeir sáu og voru áhugasamir með. Til viðbótar við að lesa vefhönnunarbækur eða sækja faglega ráðstefnur er að skoða kóðann á vefsvæðinu frábær leið fyrir byrjendur að læra HTML.

Meira en bara HTML

Eitt sem þarf að muna er að heimildaskrár geta verið mjög flóknar (og því flóknari vefsvæðið sem þú ert að skoða er, því flóknari er þessi síða kóðinn líklegri til að vera). Til viðbótar við HTML uppbygginguna sem gerir upp síðuna sem þú ert að skoða mun CSS einnig innihalda sýnilegan útlit þess vefsvæðis. Að auki munu margar vefsíður í dag innihalda handritaskrár sem fylgja með HTML.

Það er líklegt að margar handritaskrár séu með, í raun, hver og einn rekur mismunandi þætti vefsins. Frankly, kóðinn á síðuna getur virst yfirþyrmandi, sérstaklega ef þú ert nýr til að gera þetta. Ekki fá svekktur ef þú getur ekki fundið út hvað er að gerast með þessari síðu strax. Skoða HTML-uppspretta er bara fyrsta skrefið í þessu ferli. Með smá reynslu mun þú byrja að skilja betur hvernig öll þessi stykki passa saman til að búa til vefsíðu sem þú sérð í vafranum þínum. Eins og þú færð meiri þekkingu á kóðanum, verður þú að vera fær um að læra meira af því og það virðist ekki vera erfitt fyrir þig.

Svo hvernig lítur þú á kóðann á vefsíðu? Hér eru leiðbeiningar um skref fyrir skref til að gera það með því að nota Google Chrome vafrann.

Skref fyrir skref leiðbeiningar

  1. Opnaðu Google Chrome vafrann (ef þú ert ekki með Google Chrome uppsett, þetta er ókeypis niðurhal).
  2. Farðu á vefsíðu sem þú vilt skoða .
  3. Hægrismelltu á síðuna og líttu á valmyndina sem birtist. Frá því valmynd, smelltu á View page source .
  4. Kóðinn fyrir þá síðu mun nú birtast sem nýr flipi í vafranum.
  5. Einnig er hægt að nota flýtilykla á Ctrl + U á tölvu til að opna glugga með kóðanum sem birtist á síðunni. Á Mac er þessi flýtileið Command + Alt + U.

Hönnuður Verkfæri

Til viðbótar við einfaldan Skoða síðu heimildarmöguleika sem Google Króm býður upp á, geturðu einnig nýtt sér frábæra hönnunarverkfæri til að grafa enn dýpra inn á síðuna. Þessi verkfæri leyfa þér að sjá ekki aðeins HTML, heldur einnig CSS sem á við um að skoða þætti í því HTML skjali.

Til að nota forritara forritara Chrome:

  1. Opnaðu Google Chrome .
  2. Farðu á vefsíðu sem þú vilt skoða .
  3. Smelltu á táknið með þremur línum í hægra horninu í vafranum.
  4. Í valmyndinni skaltu sveima yfir Fleiri verkfærir og smelltu síðan á Hönnuðaverkfæri í valmyndinni sem birtist.
  5. Þetta mun opna glugga sem sýnir HTML kóða til vinstri við rásina og tengda CSS til hægri.
  6. Að öðrum kosti, ef þú smellir hægra megin á þáttur á vefsíðu og velur Skoðaðu frá valmyndinni sem birtist, mun verktaki verktaki Chrome koma upp og nákvæmlega þátturinn sem þú hefur valið verður auðkenndur í HTML með samsvarandi CSS sem birtist til hægri. Þetta er frábært ef þú vilt læra meira um hvernig eitt tiltekið vefsvæði var búið til.

Er að skoða upprunaheiti löglegt?

Í gegnum árin hef ég átt marga nýja vefhönnuðir að spyrja hvort það sé ásættanlegt að skoða kóðann á síðuna og nota það til menntunar og að lokum fyrir þau störf sem þau gera. Þó að afrita kóða svæðisins heildsölu og sleppa því eins og þitt eigið á vefsvæðinu er vissulega ekki ásættanlegt, að nota þessi kóða sem stökkbretti til að læra af er í raun hversu margar framfarir eru gerðar í þessum iðnaði.

Eins og ég nefndi í upphafi þessarar greinar væritu þreyttur á að finna vinnandi vefvinnu í dag sem hefur ekki lært eitthvað með því að skoða heimildarmynd vefsvæðisins! Já, að skoða kóðann á síðuna er löglegur. Notkun þessara kóða sem auðlind til að byggja eitthvað svipað er líka fínt. Taktu kóða eins og það er og sleppt því sem vinnan er þar sem þú byrjar að lenda í vandræðum.

Að lokum lærir vefur sérfræðingar frá hvor öðrum og bætast oft við þau störf sem þau sjá og eru innblásin af, svo ekki hika við að skoða kóðann á síðuna og nota það sem kennsluefni.