Google Chrome ൽ എങ്ങനെയാണ് HTML ഉറവിടം കാണുക

ഉറവിട കോഡ് കാണുന്നതിലൂടെ ഒരു വെബ്സൈറ്റ് നിർമ്മിച്ചതെങ്ങനെയെന്ന് അറിയുക

ഞാൻ ആദ്യം ഒരു വെബ് ഡിസൈനർ ആയി എന്റെ ജീവിതം ആരംഭിച്ചപ്പോൾ, ഞാൻ അഭിനന്ദിച്ച മറ്റ് വെബ് ഡിസൈനർമാരെ അവലോകനം ചെയ്തുകൊണ്ട് വളരെയധികം പഠിച്ചു. ഞാൻ ഇതിൽ ഒറ്റയ്ക്കല്ല. വെബ് വ്യവസായത്തിനോ പുതുമുഖത്തിലോ നിങ്ങൾ പുതിയവരാണെങ്കിൽ, വ്യത്യസ്ത വെബ് പേജുകളുടെ HTML ഉറവിടങ്ങൾ കാണുന്നതിലൂടെ നിങ്ങളുടെ കരിയറിലെ പല അവസരങ്ങളിലും നിങ്ങൾ പല തവണ ചെയ്യാൻ സാധ്യതയുണ്ട്.

വെബ് ഡിസൈന് പുതിയതുള്ളവർക്ക്, ഒരു സൈറ്റിന്റെ ഉറവിട കോഡ് കണ്ടാൽ ചില കാര്യങ്ങൾ എങ്ങനെ ചെയ്യാമെന്നത് കാണാൻ എളുപ്പമുള്ള വഴികളാണ്, അതിലൂടെ നിങ്ങൾക്ക് ആ ജോലിയിൽ നിന്ന് പഠിക്കുവാനും നിങ്ങളുടെ പ്രവൃത്തിയിൽ ചില കോഡ് അല്ലെങ്കിൽ ടെക്നിക്കുകൾ ഉപയോഗിക്കാൻ ആരംഭിക്കാനും കഴിയും. ഇന്ന് പ്രവർത്തിക്കുന്ന ഒരു വെബ് ഡിസൈനർ എന്ന നിലയിൽ, പ്രത്യേകിച്ചും വ്യവസായത്തിന്റെ ആദ്യദിവസങ്ങൾ മുതൽ തന്നെ അത് ചെയ്തുകൊണ്ടിരിക്കുന്നവർ. അവർ അത് തുറന്നുവെച്ച വെബ്പേജുകളുടെ സ്രോതസ്സുകൾ കണ്ടുകൊണ്ടാണ് ലളിതമായി HTML പഠിച്ചത്. വഴി. വെബ് ഡിസൈൻ ബുക്കുകൾ വായിക്കുന്നതിനോ പ്രൊഫഷണൽ കോൺഫറൻസുകളിൽ പങ്കെടുക്കുന്നതിനോ പുറമേ, ഒരു സൈറ്റിന്റെ ഉറവിട കോഡ് കാണുന്നതും തുടക്കക്കാർക്ക് HTML പഠിക്കാൻ ഒരു മികച്ച മാർഗമാണ്.

HTML- ൽ കൂടുതലും

ഓര്മ്മ ഫയലുകൾ വളരെ സങ്കീർണമായേക്കാവുന്നതാണു് (നിങ്ങൾ കാണുന്ന വെബ്സൈറ്റിന്റെ കൂടുതൽ സങ്കീർണ്ണമായ സൈറ്റുകളുടെ കോഡ് വളരെ സങ്കീർണ്ണവും ആകാവുന്നതുമാണു്). നിങ്ങൾ കാണുന്ന പേജാണ് HTML ഘടനക്ക് പുറമേ, ആ സൈറ്റിന്റെ ദൃശ്യരൂപം നിർദ്ദേശിക്കുന്ന CSS (കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) ആകും. കൂടാതെ, പല വെബ്സൈറ്റുകൾക്കും എച്ച്.റ്റി.എം.എല്ലിനൊപ്പം ഉൾപ്പെടുത്തിയിരിക്കുന്ന സ്ക്രിപ്റ്റ് ഫയലുകൾ ഉൾപ്പെടും.

ഒന്നിലധികം സ്ക്രിപ്റ്റ് ഫയലുകളും ഉണ്ടാകാനിടയുണ്ട്, വാസ്തവത്തിൽ, സൈറ്റിന്റെ വ്യത്യസ്ത വശങ്ങൾ ഓരോന്നും ശക്തിപ്പെടുത്തുന്നു. തുറന്നുപറയാം, ഒരു സൈറ്റിന്റെ ഉറവിട കോഡ് അധികരിക്കുന്നതായി തോന്നാം, പ്രത്യേകിച്ച് നിങ്ങൾ ഇത് ചെയ്യുന്ന പുതിയ ആളാണെങ്കിൽ. ഉടൻ തന്നെ ആ സൈറ്റിൽ എന്തൊക്കെയാണ് നടന്നുകൊണ്ടിരിക്കുന്നതെന്ന് നിങ്ങൾക്ക് മനസ്സിലാകുന്നില്ലെങ്കിൽ നിരാശപ്പെടരുത്. HTML സ്രോതസ്സ് കാണുന്നു എന്നത് ഈ പ്രോസസിലെ ആദ്യപടിയാണ്. ഒരു ചെറിയ അനുഭവത്തിലൂടെ, നിങ്ങളുടെ ബ്രൌസറിൽ നിങ്ങൾ കാണുന്ന വെബ്സൈറ്റ് സൃഷ്ടിക്കാൻ ഈ കഷണങ്ങൾ ഒന്നിച്ചുചേർന്ന് നന്നായി മനസ്സിലാക്കാൻ തുടങ്ങും. നിങ്ങൾക്ക് കോഡ് കൂടുതൽ പരിചിതമാകുന്നതോടെ, അതിൽ നിന്ന് കൂടുതൽ കാര്യങ്ങൾ മനസ്സിലാക്കാൻ നിങ്ങൾക്ക് കഴിയും, അത് നിങ്ങളെ ബുദ്ധിമുട്ടിക്കുന്നില്ല.

ഒരു വെബ്സൈറ്റിന്റെ ഉറവിട കോഡ് നിങ്ങൾ എങ്ങനെ കാണുന്നു? ഗൂഗിൾ ക്രോം ബ്രൌസർ ഉപയോഗിച്ച് അത് ചെയ്യാൻ പടി പടിയായുള്ള നിർദ്ദേശങ്ങൾ ഇതാ.

ഘട്ടം നിർദ്ദേശങ്ങൾ അനുസരിച്ച്

1. Google Chrome വെബ് ബ്രൗസർ തുറക്കുക (നിങ്ങൾക്ക് Google Chrome ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലെങ്കിൽ, ഇത് സൌജന്യ ഡൗൺലോഡാണ്).
2. നിങ്ങൾ പരിശോധിക്കാൻ താൽപ്പര്യപ്പെടുന്ന വെബ്പേജിലേക്ക് നാവിഗേറ്റുചെയ്യുക.
3. പേജിൽ വലത് ക്ലിക്കുചെയ്ത് ദൃശ്യമാകുന്ന മെനു സന്ദർശിക്കുക. ആ മെനുവിൽ നിന്ന്, പേജ് ഉറവിടം കാണുക ക്ലിക്കുചെയ്യുക.
4. ആ പേജിനായുള്ള സോഴ്സ് കോഡ് ഇപ്പോൾ ബ്രൌസറിൽ ഒരു പുതിയ ടാബായി ദൃശ്യമാകും.
5. കൂടാതെ, ഒരു സൈറ്റിന്റെ സോഴ്സ് കോഡ് പ്രദർശിപ്പിച്ച് ഒരു വിൻഡോ തുറക്കുന്നതിന് PC- യിൽ CTRL + U എന്ന കീബോർഡ് കുറുക്കുവഴികളും നിങ്ങൾക്ക് ഉപയോഗിക്കാനാകും. ഒരു മാക്കിൽ, ഈ കുറുക്കുവഴി കമാൻഡ് + Alt + U ആണ് .

ഡെവലപ്പർ ഉപകരണങ്ങൾ

Google Chrome വാഗ്ദാനം ചെയ്യുന്ന ലളിതമായ കാഴ്ച പേജ് ഉറവിട ശേഷി കൂടാതെ, ഒരു മികച്ച സൈറ്റിനായി കൂടുതൽ ആഴത്തിൽ തിരയുന്നതിന് അവരുടെ മികച്ച ഡവലപ്പർ ഉപകരണങ്ങളുടെ പ്രയോജനവും നിങ്ങൾക്ക് നേടാനാകും. ഈ ടൂളുകൾ നിങ്ങളെ HTML കാണാൻ മാത്രമല്ല, ആ HTML പ്രമാണത്തിലെ ഘടകങ്ങൾ കാണുന്നതിന് ഉപയോഗിക്കുന്ന CSS നെ അനുവദിക്കും.

Chrome- ന്റെ ഡവലപ്പർ ഉപകരണങ്ങൾ ഉപയോഗിക്കാൻ:

1. Google Chrome തുറക്കുക.
2. നിങ്ങൾ പരിശോധിക്കാൻ താൽപ്പര്യപ്പെടുന്ന വെബ്പേജിലേക്ക് നാവിഗേറ്റുചെയ്യുക.
3. ബ്രൗസർ വിൻഡോയുടെ മുകളിൽ വലത് കോണിലുള്ള മൂന്ന് വരികളുള്ള ഐക്കണിൽ ക്ലിക്കുചെയ്യുക.
4. മെനുവിൽ നിന്നും കൂടുതൽ ഉപകരണങ്ങൾ ഹോവർ ചെയ്യുക തുടർന്ന് ദൃശ്യമാകുന്ന മെനുവിൽ ഡവലപ്പർ ഉപകരണങ്ങൾ ക്ലിക്കുചെയ്യുക.
5. ഇത് പാനിന്റെ ഇടതുവശത്തുള്ള HTML ഉറവിട കോഡും വലതുഭാഗത്തുള്ള അനുബന്ധ CSS ഉം കാണിക്കുന്ന ഒരു ജാലകം തുറക്കും.
6. പകരം, നിങ്ങൾ ഒരു വെബ് പേജിൽ ഒരു ഘടകം വലത് ക്ലിക്കുചെയ്ത് ദൃശ്യമാകുന്ന മെനുവിൽ നിന്ന് പരിശോധിക്കുക തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, Chrome ഡവലപ്പർ ഉപകരണങ്ങൾ പോപ്പ് അപ്പ് ചെയ്യും, നിങ്ങൾ തിരഞ്ഞെടുത്ത കൃത്യമായ ഘടകം വലത് വശത്ത് ദൃശ്യമായ CSS ഉള്ള HTML ൽ ഹൈലൈറ്റുചെയ്യപ്പെടും. ഒരു സൈറ്റിന്റെ ഒരു പ്രത്യേക ഭാഗം എങ്ങനെ സൃഷ്ടിച്ചു എന്നതിനെക്കുറിച്ച് കൂടുതലറിയണമെങ്കിൽ ഇത് സൂപ്പർ സഹായകരമാണ്.

ഉറവിട കോഡ് കാണുന്നുണ്ടോ?

വർഷങ്ങളായി, പല പുതിയ വെബ് ഡിസൈനർമാർ ഒരു സൈറ്റിന്റെ സോഴ്സ് കോഡും അവരുടെ വിദ്യാഭ്യാസത്തിനുപയോഗിക്കുന്നതും ആത്യന്തികമായി അവർ ചെയ്യുന്ന പ്രവൃത്തിയ്ക്കുമായി ഉപയോഗിക്കുന്നതും സ്വീകാര്യമാണോ എന്ന് ഞാൻ ചോദ്യം ചെയ്തിട്ടുണ്ട്. ഒരു സൈറ്റിന്റെ കോഡ് മൊത്തമായി പകർത്താനും സൈറ്റിന് സ്വന്തമാക്കാതിരിക്കാനുമുള്ള അവസരം സ്വീകാര്യമല്ല. പഠനത്തിനുവേണ്ട സ്പ്രെഡ്ബോർഡായി ആ കോഡ് ഉപയോഗിക്കുന്നത് ഈ വ്യവസായത്തിൽ എത്രമാത്രം പുരോഗതിയാണ് ഉണ്ടാക്കുന്നത്.

ഈ ലേഖനത്തിന്റെ തുടക്കത്തിൽ ഞാൻ സൂചിപ്പിച്ചതുപോലെ, ഒരു വെബ് സൈറ്റിലെ പ്രൊഫഷണലിനെ കണ്ടെത്താൻ ഒരു സൈറ്റ് ഉറവിടം കാണുന്നതിലൂടെ എന്തോ ഒരു പഠിത്തം ഇല്ലാത്തത് കണ്ടെത്താൻ നിങ്ങൾക്ക് ബുദ്ധിമുട്ടേണ്ടി വരും. അതെ, ഒരു സൈറ്റിന്റെ ഉറവിട കോഡ് കാണുന്നത് നിയമപരമാണ്. സമാനമായ എന്തെങ്കിലും നിർമ്മിക്കുവാൻ ഒരു വിഭവമായി ആ കോഡ് ഉപയോഗിക്കുന്നത് നല്ലതാണ്. നിങ്ങളുടേതു പോലെ പ്രവർത്തിച്ചുകൊണ്ടിരിക്കുന്ന കോഡ് പ്രവർത്തിപ്പിക്കുന്നതിനാലും പ്രശ്നങ്ങൾ നേരിടാൻ തുടങ്ങുന്നു.

അവസാനമായി, വെബ് പ്രൊഫഷണലുകൾ പരസ്പരം പഠിക്കുകയും, അവർ കാണുകയും പ്രചോദിപ്പിക്കുകയും ചെയ്യുന്ന ജോലിയിൽ നിന്ന് കൂടുതൽ മെച്ചപ്പെടുകയും, അതിനാൽ ഒരു സൈറ്റിന്റെ ഉറവിട കോഡ് കാണാനും അതിനെ ഒരു പഠന ഉപകരണം ആയി ഉപയോഗിക്കാനും മടിക്കരുത്.