Hoe sjocht de HTML-boarne yn Google Chrome

Learje hoe't in webside boud is troch te besjen fan syn boarne koade

As ik earst myn karriêre as webûntwerper begon, learde ik sa folle troch it werjaan fan 'e wurken fan oare web-ûntwerper dy't ik bewûndere. Ik bin net allinich yn dit. Oft jo nij binne nei de yndustry of in seizgjende feteranen, besjen de HTML-boarne fan ferskillende websiden is wat jo faaks in protte kearen dwaan oer de rin fan jo karriêre.

Foar dyjingen dy't nij binne yn 'e web design, besjen fan in boarne koade fan in side is ien fan' e easke manieren om te sjen hoe gewoan dingen binne dien om jo te learen fan dat wurk en begjinne gewoan code of technyk te brûken yn jo eigen wurk. As ien fan 'e web-ûntwerper dy't hjoed de dei wurkje, benammen dy' t sûnt de earste dagen fan 'e sektor west binne, en it is in feilige bet dy't se mei jo fertelle dat se HTML leard hawwe gewoan troch te besjen de boarne fan de websiden dy't sy seagen troch. Neist it lêzen fan webdesignboeken of besykje profesjonele konferinsjes , it besjen fan in boarne koade fan in side is in goede manier foar begjinners om HTML te learen.

Mear as gewoan HTML

Ien ding om te ferjitten is dat boarne triemmen tige komplisearre wurde kinne (en de komplexere is de webside dy't jo besjen, de kompleetere dat de koade fan 'e webside is wierskynlik). Neist de HTML-struktuer dy't de side besjochst, dy 't jo besjogge, sil der ek CSS wêze (kaskaderende stylblêden) dy't it fisuele útstrieling fan dizze side diktearje. Dêrneist sille hjoeddeistige siden webside skriptdateurs tafoegje mei de HTML.

Der is wierskynlik meardere skriptdateurs opnommen, nammentlik elk dy't ferskate aspekten fan 'e side oanmeitsje. Frou, in side kin de boarne koade oerweldigje, benammen as jo nije binne om dit te dwaan. Nim net frustrearre as jo net útkarre kinne wat wat mei dizze side fuort giet. It sjen fan de HTML-boarne is gewoan de earste stap yn dit proses. Mei in bytsje erfaring, begjinne jo better begryp te meitsjen hoe't alle punten byinoar passe om de webside te meitsjen dy't jo yn jo blêdwizer sjen. As jo ​​mear bekend meitsje mei de koade, dan kinne jo mear leare litte en it sil net dúdlik meitsje foar jo.

Hokfoar sjogge jo de boarne koade fan in webside? Hjir is de stap-troch-stap-ynstruksje om dit te brûken mei de Google Chrome-blêder.

Stap foar stap ynstruksjes

  1. Iepenje de Google Chrome-webblêder (as jo Google Chrome net ynstallearje, dit is in fergese download).
  2. Gean nei de webside dy't jo besjen wolle .
  3. Rjochts-klik op ' e side en besjoch it menu dat ferskynt. Ut dat menu kinne jo klikke op side-boarne .
  4. De boarne koade foar dizze side ferskynt no as in nije ljepper yn 'e browser.
  5. As alternatyf kinne jo ek de toetseboerd fluchtoetsen fan CTRL + U brûke op in PC om in finster te iepenjen mei de werjeftige koade fan in side. Op in Mac wurdt dizze fluchtoets Command + Alt + U.

Developer Tools

Neist de ienfâldige Side-side- kwaliteitsfeardigens dy't Google Chrome biedt, kinne jo ek foardielje fan har poerbêste Developer-ark om te finen yn in side. Dizze ynstruminten kinne jo net allinich it HTML sjen, mar ek de CSS dat jildt foar eleminten yn dit HTML dokumint.

Om Chrome's ûntwikkelers ark te brûken:

  1. Google Chrome iepenje.
  2. Gean nei de webside dy't jo besjen wolle .
  3. Klik op it byldkaike mei trije rigels yn 'e boppeste rjochte hoeke fan it blêder finster.
  4. Gean út it menu, steane oer Mear ark en klik dan op Developer-ark yn it menu dat ferskynt.
  5. Dit sil in finster iepenje dy't de HTML-boarne koade lofts sjen litte fan 'e sjabloan en de ferbûne CSS op' e rjochterkant.
  6. As jo ​​rjochts op in elemint klikke op in webside en selektearje Kontrolearje fan it menu dat ferskynt, sil Chrome ûntwikkelers ark opnimme en it krekte elemint dat jo selekteare sille wurde markearre yn 'e HTML mei de oanbelangjende CSS werjûn. Dit is super nedich as jo mear leare wolle oer hoe't ien spesifike stik fan in side makke is.

Is it boartsjen fan boarne koade juridyske?

Oer de jierren hawwe ik in protte nije webûntwerpers frege oft it akseptabel is om in boarne koade fan 'e side te besjen en te brûken foar har ûnderwiis en úteinlik foar it wurk dat se dogge. By it kopiearjen fan in koade fan in webstee en kopiearjen as jo eigen op in side is wis net net akseptabel, mei dizze koade as springbrêge om te learen is eigentlik hoefolle foardielen binne makke yn dizze sektor.

As ik oan it begjin fan dit artikel neamde, soest it hurd miskien wêze om in wurkjende webside te finen dy't no wat hat leard troch it besjen fan in side's boarne! Ja, besjoch de boarne koade fan in side is juridysk. It brûken fan dy koade as in boarne om wat like te bouwen is ek goed. Taken as it is en is it útstjoeren as jo wurk is wêr't jo begjinne mei problemen.

Op it lêst leare webpeppers fan elkoar en faak ferbetterje op it wurk dat se sjogge en wurde ynspirearre troch, dus besykje gjin boarne koade fan in side te besjen en it as leararkom te brûken.