Sut I Edrych ar y Ffynhonnell HTML yn Google Chrome

Dysgwch sut y cafodd gwefan ei hadeiladu trwy edrych ar ei god ffynhonnell

Pan ddechreuais fy ngyrfa fel dylunydd gwe ar y dechrau, dysgais gymaint trwy adolygu gwaith dylunwyr gwe eraill yr wyf yn edmygu. Nid wyf ar fy mhen fy hun yn hyn o beth. P'un a ydych chi'n newydd i'r diwydiant gwe neu gyn-filwr hen, yn edrych ar ffynhonnell HTML gwahanol dudalennau gwe yn rhywbeth yr ydych yn debygol o wneud sawl gwaith dros eich gyrfa.

I'r rhai sy'n newydd i ddylunio gwe, mae edrych ar god ffynhonnell y safle yn un o'r ffyrdd hawsaf o weld sut mae pethau'n cael eu gwneud er mwyn i chi allu dysgu o'r gwaith hwnnw a dechrau defnyddio cod neu dechnegau penodol yn eich gwaith eich hun. Fel unrhyw ddylunydd gwe sy'n gweithio heddiw, yn enwedig y rhai sydd wedi bod arno ers dyddiau cynnar y diwydiant, ac mae'n bet diogel iddynt ddweud wrthych maen nhw wedi dysgu HTML yn syml trwy edrych ar ffynhonnell y tudalennau gwe y maent yn eu gweld a'u bod yn ddiddorol gan. Yn ogystal â darllen llyfrau dylunio gwe neu fynychu cynadleddau proffesiynol , mae edrych ar god ffynhonnell y safle yn ffordd wych i ddechreuwyr ddysgu HTML.

Mwy na Dim ond HTML

Un peth i'w gofio yw bod y ffeiliau ffynhonnell yn gallu bod yn gymhleth iawn (a'r mwyaf cymhleth y gwefan yr ydych yn ei weld yw, y mwyaf cymhleth yw bod cod y safle yn debygol o fod). Yn ogystal â'r strwythur HTML sy'n ffurfio'r dudalen rydych chi'n ei weld, bydd hefyd CSS (taflenni arddull rhaeadru) sy'n pennu ymddangosiad gweledol y safle hwnnw. Yn ogystal, bydd llawer o wefannau heddiw yn cynnwys ffeiliau sgript a gynhwysir ynghyd â'r HTML.

Mae'n debyg y bydd ffeiliau sgript lluosog yn cynnwys, mewn gwirionedd, pob un yn pweru gwahanol agweddau ar y wefan. Yn ffydd, gall cod ffynhonnell y safle ymddangos yn llethol, yn enwedig os ydych chi'n newydd i wneud hyn. Peidiwch â chael rhwystredigaeth os na allwch nodi beth sy'n digwydd gyda'r safle hwnnw ar unwaith. Gweld fformat HTML yw'r unig gam cyntaf yn y broses hon. Gyda phrofiad bach, byddwch yn dechrau deall yn well sut mae'r holl ddarnau hyn yn cyd-fynd â'i gilydd i greu'r wefan a welwch yn eich porwr. Wrth i chi ddod yn fwy cyfarwydd â'r cod, byddwch chi'n gallu dysgu mwy ohono ac ni fydd yn ymddangos yn frawychus i chi.

Felly sut ydych chi'n gweld cod ffynhonnell gwefan? Dyma'r cyfarwyddiadau cam wrth gam i wneud hynny gan ddefnyddio porwr Google Chrome.

Cyfarwyddiadau Cam wrth Gam

  1. Agorwch borwr gwe Google Chrome (os nad oes gennych Google Chrome wedi'i osod, mae hwn yn ddadlwytho am ddim).
  2. Ewch i'r dudalen we yr hoffech ei archwilio .
  3. De-gliciwch ar y dudalen ac edrychwch ar y ddewislen sy'n ymddangos. O'r ddewislen honno, cliciwch Ffynhonnell y dudalen Gweld .
  4. Bydd cod ffynhonnell y dudalen honno bellach yn ymddangos fel tab newydd yn y porwr.
  5. Fel arall, gallwch hefyd ddefnyddio llwybrau byr bysellfwrdd CTRL + U ar gyfrifiadur i agor ffenestr gyda chod ffynhonnell y safle wedi'i arddangos. Ar Mac, mae'r llwybr byr hwn yn Command + Alt + U.

Offer Datblygwr

Yn ychwanegol at y gallu ffynhonnell Gweld tudalen syml y mae Google Chrome yn ei gynnig, gallwch hefyd fanteisio ar eu Offer Datblygwr ardderchog i gloddio hyd yn ddyfnach i mewn i safle. Bydd yr offer hyn yn caniatáu i chi nid yn unig weld yr HTML, ond hefyd yr CSS sy'n berthnasol i weld elfennau yn y ddogfen HTML honno.

I ddefnyddio offer datblygwr Chrome:

  1. Agor Google Chrome .
  2. Ewch i'r dudalen we yr hoffech ei archwilio .
  3. Cliciwch yr eicon gyda thair llinell yn y gornel dde uchaf ar y ffenestr porwr.
  4. O'r fwydlen, trowch dros Mwy o offer ac yna cliciwch ar offer Datblygwr yn y fwydlen sy'n ymddangos.
  5. Bydd hyn yn agor ffenestr sy'n dangos y cod ffynhonnell HTML ar ochr chwith y panel a'r CSS cysylltiedig ar y dde.
  6. Fel arall, os ydych chi'n clicio ar y dde yn y dudalen we ac yn dewis Archwiliwch o'r ddewislen sy'n ymddangos, bydd offer datblygwr Chrome yn dod i ben a bydd yr union elfen a ddewiswyd gennych yn cael ei amlygu yn yr HTML gyda'r CSS cyfatebol a ddangosir i'r dde. Mae hyn yn ddefnyddiol iawn os ydych chi eisiau dysgu mwy am sut y lluniwyd un darn penodol o safle.

Ydych chi'n Gweld Cod Ffynhonnell Cyfreithiol?

Dros y blynyddoedd, rwyf wedi cael llawer o ddylunwyr gwe newydd yn cwestiynu a yw'n dderbyniol i weld cod ffynhonnell y safle a'i ddefnyddio ar gyfer eu haddysg ac yn y pen draw am y gwaith y maen nhw'n ei wneud. Er nad yw copi copi cod y safle cyfanwerthu a'i drosglwyddo fel eich hun ar safle yn sicr yn dderbyniol, gan ddefnyddio'r cod hwnnw fel ffynhonnell i ddysgu oddi wrthych faint o ddatblygiadau sy'n cael eu gwneud yn y diwydiant hwn.

Fel y soniais ar ddechrau'r erthygl hon, byddai'n anodd iawn dod o hyd i weithiwr proffesiynol sy'n gweithio ar y we heddiw nad yw wedi dysgu rhywbeth trwy edrych ar ffynhonnell y wefan! Ydy, mae gweld cod ffynhonnell y safle yn gyfreithiol. Mae defnyddio'r cod hwnnw fel adnodd i adeiladu rhywbeth tebyg hefyd yn iawn. Cymryd cod fel y mae a throsglwyddo i ffwrdd gan mai'ch gwaith chi yw lle rydych chi'n dechrau dod o hyd i broblemau.

Yn y diwedd, mae gweithwyr proffesiynol y we yn dysgu oddi wrth ei gilydd ac yn aml yn gwella ar y gwaith y maent yn ei weld ac yn cael eu hysbrydoli gan, felly peidiwch ag oedi i weld cod ffynhonnell y safle a'i ddefnyddio fel offeryn dysgu.