Google Chrome માં HTML સ્રોત કેવી રીતે જોવા

વેબસાઇટનો સ્રોત કોડ જોઈને તે કેવી રીતે બનાવવામાં આવ્યું તે જાણો

જ્યારે મેં પહેલીવાર વેબ ડિઝાઇનર તરીકે મારી કારકિર્દી શરૂ કરી ત્યારે મેં અન્ય વેબ ડિઝાઇનરોના કામની સમીક્ષા કરીને ખૂબ જ શીખ્યા જેમને હું પ્રશંસા કરી. હું આમાં એકલા નથી. શું તમે વેબ ઉદ્યોગ અથવા અનુભવી પીઢ માટે નવા છો, જુદા જુદા વેબપૃષ્ઠોના HTML સ્રોતને જોતા તમે તમારા કારકિર્દી દરમિયાન ઘણી વખત આમ કરો છો.

જેઓ વેબ ડીઝાઇન માટે નવા છે, સાઇટના સ્રોત કોડને જોવા માટે, અમુક વસ્તુઓ કેવી રીતે કરવામાં આવે છે તે જોવા માટેના સૌથી સરળ રીતો પૈકી એક છે જેથી તમે તે કાર્યમાંથી શીખી શકો અને તમારા પોતાના કાર્યમાં અમુક કોડ અથવા તકનીકોનો ઉપયોગ કરવાનું શરૂ કરી શકો. આજે કોઈપણ વેબ ડેવલપર કામ કરે છે, ખાસ કરીને જેઓ ઉદ્યોગોના પ્રારંભિક દિવસોથી તેના પર છે, અને તે સલામત બીઇટી છે કે તેઓ તમને કહે છે કે તેઓ વેબ પાનાંઓના સ્રોતને જોઈને ફક્ત HTML શીખ્યા છે જે તેઓએ જોયા અને તેમને તિરસ્કાર કર્યો. દ્વારા વેબ ડિઝાઇન પુસ્તકો વાંચવા અથવા વ્યવસાયિક પરિષદોમાં ભાગ લેવા ઉપરાંત, સાઇટના સ્રોત કોડને જોવું એ શરૂઆત માટે HTML શીખવા માટે એક સરસ રીત છે.

ફક્ત HTML કરતાં વધુ

યાદ રાખવું એક બાબત એ છે કે સ્રોત ફાઇલો ખૂબ જ જટીલ હોઇ શકે છે (અને તમે જોઈ રહ્યાં છો તે વેબસાઇટ વધુ જટિલ છે, તે સાઇટના કોડ વધુ જટિલ છે). HTML માળખું ઉપરાંત જે તમે જોઈ રહ્યા છો તે પૃષ્ઠ બનાવે છે, ત્યાં પણ CSS (કેસ્કેડીંગ સ્ટાઇલ શીટ્સ) હશે જે તે સાઇટના દ્રશ્ય દેખાવ પર નિર્ધારિત કરશે. વધુમાં, ઘણી વેબસાઇટ્સ આજે એચટીએમએલ સાથે સમાવવામાં સ્ક્રિપ્ટ ફાઈલો સમાવેશ કરશે

ત્યાં ઘણી સ્ક્રિપ્ટ ફાઇલોનો સમાવેશ થવાની સંભાવના છે, વાસ્તવમાં, દરેક સાઇટના જુદા જુદા પાસાંઓને સંચાલિત કરે છે. પ્રમાણિકપણે, સાઇટના સ્રોત કોડને બહુ જબરજસ્ત લાગે છે, ખાસ કરીને જો તમે આ કરવા માટે નવા છો નિરાશ થશો નહીં જો તમે સમજી શકતા નથી કે તરત જ તે સાઇટ સાથે શું ચાલી રહ્યું છે HTML સ્ત્રોત જોઈ રહ્યા છીએ આ પ્રક્રિયામાં ફક્ત પ્રથમ પગલું છે થોડો અનુભવ સાથે, તમે વધુ સારી રીતે સમજી શકો છો કે આ બધી ટુકડાઓ તમે તમારા બ્રાઉઝરમાં જે વેબસાઇટને જોશો તે બનાવવા માટે એકસાથે ફિટ થઈ જશે. જેમ તમે કોડ સાથે વધુ પરિચિત થાઓ છો, તેમ તમે તેનાથી વધુ શીખી શકશો અને તે તમારા માટે ભયાવહ બનશે નહીં.

તો તમે વેબસાઈટના સ્રોત કોડને કેવી રીતે જોશો? અહીં Google Chrome બ્રાઉઝરનો ઉપયોગ કરીને આવું કરવા માટે પગલું-દર-પગલાં સૂચનો છે.

પગલું સૂચનાઓ દ્વારા પગલું

1. Google Chrome વેબ બ્રાઉઝર ખોલો (જો તમારી પાસે Google Chrome ઇન્સ્ટોલ કરેલું ન હોય તો, આ એક મફત ડાઉનલોડ છે).
2. તમે પરીક્ષણ કરવા માંગો છો તે વેબ પૃષ્ઠ પર નેવિગેટ કરો.
3. પૃષ્ઠ પર જમણું-ક્લિક કરો અને દેખાય છે તે મેનૂ જુઓ. તે મેનૂમાંથી, પૃષ્ઠ સ્રોત જુઓ ક્લિક કરો.
4. તે પૃષ્ઠના સ્રોત કોડ હવે બ્રાઉઝરમાં એક નવો ટેબ તરીકે દેખાશે.
5. વૈકલ્પિક રીતે, તમે પીસી પર CTRL + U ના કીબોર્ડ શૉર્ટકટ્સનો ઉપયોગ પણ પ્રદર્શિત કરી શકો છો, જેમાં સાઇટનાં સ્રોત કોડ પ્રદર્શિત થાય છે. મેક પર, આ શોર્ટકટ આદેશ + Alt + U છે

વિકાસકર્તા સાધનો

Google Chrome તક આપે છે તે સરળ જુઓ પૃષ્ઠ સ્રોતની ક્ષમતા ઉપરાંત, તમે સાઇટમાં વધુ ઊંડાઇ જવા માટે તેમના શ્રેષ્ઠ વિકાસકર્તા સાધનોનો લાભ લઈ શકો છો. આ ટૂલ્સ તમને ફક્ત એચટીએમએલ જ જોવા દેશે નહીં, પરંતુ તે HTML દસ્તાવેજમાં ઘટકો જોવા માટે લાગુ પડતા CSS પણ.

Chrome ના વિકાસકર્તા સાધનોનો ઉપયોગ કરવા માટે:

1. Google Chrome ખોલો
2. તમે પરીક્ષણ કરવા માંગો છો તે વેબ પૃષ્ઠ પર નેવિગેટ કરો.
3. બ્રાઉઝર વિંડોની ઉપરના જમણા ખૂણામાં ત્રણ રેખાઓ સાથે ચિહ્ન પર ક્લિક કરો.
4. મેનૂમાંથી, વધુ ટૂલ્સ પર હૉવર કરો અને તે પછી મેનૂમાં વિકાસકર્તા ટૂલ્સ ક્લિક કરો.
5. આ એક વિંડો ખોલશે જે ફલકની ડાબી બાજુએ HTML સ્રોત કોડ અને જમણી બાજુથી સંબંધિત સીએસએસ બતાવશે.
6. વૈકલ્પિક રીતે, જો તમે કોઈ વેબ પેજમાં એક ઘટક પર જમણું ક્લિક કરો અને દેખાતા મેનુમાંથી નિરીક્ષણો પસંદ કરો , તો Chrome ના વિકાસકર્તા સાધનો પૉપ અપ કરશે અને તમે પસંદ કરેલ ચોક્કસ તત્વ એચટીએમએલમાં જમણી બાજુ બતાવેલ સંલગ્ન CSS સાથે પ્રકાશિત કરવામાં આવશે. જો તમે સાઇટ વિશે કોઈ ચોક્કસ ભાગ કેવી રીતે બનાવવામાં આવી હતી તે વિશે વધુ જાણવા માંગતા હો તો આ ખૂબ જ ઉપયોગી છે.

શું સોર્સ કોડ જોઈ રહ્યાં છે કાનૂની?

વર્ષો દરમિયાન, મેં ઘણા નવા વેબ ડીઝાઇનરોને પ્રશ્ન કર્યો કે શું તે સાઇટના સ્રોત કોડને જોવાનું સ્વીકાર્ય છે અને તેનો ઉપયોગ તેમના શિક્ષણ માટે અને છેવટે તેઓ કરેલા કાર્ય માટે કરે છે. સાઈટનો કોડ હોલસેલ નકલ કરતી વખતે અને તેને સાઇટ પર તમારી પોતાની રીતે બંધ કરવો એ ચોક્કસપણે સ્વીકાર્ય નથી, આ કોડનો ઉપયોગ કરીને શીખવા માટે એક સ્પ્રિંગબોર્ડ તરીકે ખરેખર આ ઉદ્યોગમાં કેટલા પ્રગતિ કરવામાં આવે છે

જેમ જેમ મેં આ લેખની શરૂઆતમાં ઉલ્લેખ કર્યો છે, તેમ તમે કોઈ કામ કરનારા વેબ પ્રોફેશનલને શોધવા માટે કડક દબાવશો જેણે કોઈ સાઇટનો સ્રોત જોયો છે. હા, સાઇટનો સ્રોત કોડ જોવા કાનૂની છે. કંઇક સમાન બનાવવા માટે સ્ત્રોત તરીકે તે કોડનો ઉપયોગ કરવાનું પણ સારું છે. કોડ લેવાનું અને તે પસાર થઈ રહ્યું છે કારણ કે તમારું કાર્ય જ્યાં તમે સમસ્યાઓનો સામનો કરવાનું શરૂ કરો છો ત્યાં છે.

અંતે, વેબ પ્રોફેશનલ્સ એકબીજા પાસેથી શીખે છે અને જે કાર્ય તેઓ જોતા અને પ્રેરણા આપે છે તેના પર ઘણીવાર સુધારો કરે છે, તેથી કોઈ સાઇટના સ્રોત કોડને જોવામાં અચકાવું નહીં અને તેને શીખવા સાધન તરીકે ઉપયોગ કરો.