Сазнајте како је веб страница направљена гледањем његовог изворног кода
Када сам први пут започео своју каријеру као веб дизајнер, научио сам толико тога што сам прегледао рад других веб дизајнера којима сам се дивио. Нисам сам у овоме. Било да сте нови у веб индустрији или искусни ветеран, гледање ХТМЛ извора на различитим веб страницама је нешто што ћете вероватно учинити много пута у току ваше каријере.
За оне који су нови у веб дизајну, преглед изворног кода сајта је један од најједноставнијих начина да видите како се одређене ствари раде тако да можете сазнати од тог посла и почети користити одређени код или технике у свом послу. Као и сваки веб дизајнер који ради данас, посебно оних који су били у њему од раних дана индустрије, и то је сигурна опклада коју они кажу да су научили ХТМЛ једноставно гледајући извор веб страница које су видели и били су заинтригирани од стране. Поред читања књига за веб дизајн или присуствовање професионалним конференцијама , преглед изворног кода сајта је одличан начин за почетнике да уче ХТМЛ.
Више од само ХТМЛ-а
Једна ствар коју треба запамтити је да изворни фајлови могу бити веома компликовани (и што је сложенија веб страница коју гледате, то ће бити сложенији код овог сајта). Поред ХТМЛ структуре која чини страницу коју прегледате, такође ће бити ЦСС (каскадни листови стилова) који диктирају визуелни изглед тог сајта. Поред тога, многе веб странице данас ће укључивати датотеке скрипта укључене заједно са ХТМЛ-ом.
Вероватно ће имати више скриптних датотека, у ствари, сваки ће напајати различите аспекте сајта. Искрено, изворни код сајта може изгледати претерано, нарочито ако сте нови у томе. Немојте бити фрустрирани ако не можете да схватите шта се дешава са тим сајтом одмах. Преглед ХТМЛ извора је само први корак у овом процесу. Уз мало искуства, почећете да боље разумете како се сви ови делови уклапају заједно како бисте креирали веб страницу коју видите у вашем прегледачу. Пошто сте упознати са кодом, моћи ћете да сазнате више од тога и неће вам изгледати застрашујуће.
Па како видите изворни код веб странице? Ево упутстава корак по корак за то помоћу Гоогле Цхроме прегледача.
Корак по корак Инструкције
- Отворите Гоогле Цхроме веб прегледач (ако немате инсталиран Гоогле Цхроме, ово је бесплатна преузимања).
- Идите на веб страницу коју желите прегледати .
- Десним тастером миша кликните на страницу и погледајте мени који се појављује. Из тог менија кликните Виев соурце паге .
- Изворни код за ту страницу сада ће се појавити као нови језичак у прегледачу.
- Алтернативно, такође можете користити пречице на тастатури ЦТРЛ + У на рачунару да бисте отворили прозор са приказаним изворним кодом сајта. На Мац-у, ова пречица је Цомманд + Алт + У.
Алатке за развој
Поред једноставне могућности за приказ странице на Гоогле Цхроме-у, такође можете искористити њихове изврсне Алатке за развијање да бисте ископали још дубље у веб локацију. Ови алати ће вам омогућити не само да видите ХТМЛ, већ и ЦСС који се примењује за приказивање елемената у том ХТМЛ документу.
Да бисте користили Цхроме-ове алате за развијање:
- Отворите Гоогле Цхроме .
- Идите на веб страницу коју желите прегледати .
- Кликните икону са три линије у горњем десном углу прозора прегледача.
- У менију кликните на дугме Више алата, а затим у менију који се појављује, кликните на алатке за развијање.
- Ово ће отворити прозор који приказује ХТМЛ изворни код на лијевој страни панела и одговарајуће ЦСС с десне стране.
- Алтернативно, ако десни кликнете на елемент у веб страници и изаберите Инспецт из менија који се појављује, Цхроме-ов алат за програмер ће се појавити и тачан елемент који сте одабрали ће бити означен у ХТМЛ-у са одговарајућим ЦСС приказаним удесно. Ово је од велике помоћи ако желите да сазнате више о томе како је направљен један одређени део сајта.
Да ли је изворни код законит?
Током година, имао сам много нових веб дизајнера да се питам да ли је прихватљиво видети изворни код сајта и користити га за своје образовање и на крају за посао који они раде. Приликом копирања велетрговине сајта на веб страницу и преношење као своје на сајт сигурно није прихватљиво, користећи тај код као одскочну даску за учење, заправо је колико напредака је направљено у овој индустрији.
Као што сам поменуо на почетку овог чланка, тешко би сте пронашли професионалног веб професионалца који није нешто научио прегледањем извора сајта! Да, преглед изворног кода сајта је легалан. Користећи тај код као ресурс за изградњу сличног, такође је у реду. Узимање кода као и испуштање док је ваш посао где почињете да се суочите са проблемима.
На крају, веб професионалци уче једни од других и често побољшавају рад који виде и инспиришу, па немојте оклевати да погледате изворни код сајта и да га користите као алат за учење.