እንዴት አንድ ድር ጣቢያ ምንጩን ኮድ በመመልከት እንዴት እንደሚገነባ ይወቁ
እንደ የዌብ ዲዛይነር ያለኝን ሥራ ለመጀመሪያ ጊዜ ስጀምር, የምደነቅባቸውን የድረ-ገጽ ንድፍ ባለሙያዎች ሥራ በመገምገም ብዙ ነገር ተምሬያለሁ. በዚህ ውስጥ ብቻዬን አይደለሁም. ለድረ-ገጹ አዲስም ሆኑ ልምድ ያለው ልምድ ካላቸው, የተለያዩ ድረ-ገጾችን የኤች.ቲ.ኤም.ኤል ምንጭ መመልከትን በሙያዎ ሂደት ብዙ ጊዜ ሊያደርጉት ከሚችሉት አንዱ ነው.
ለድር ዲዛይን አዲስ ለሆኑ ሰዎች, የድረገፁ ምንጭ ኮድ ስለ አንዳንድ ስራዎች እንዴት እንደሚሰሩ እና የተወሰኑ ኮዶችን እና ቴክኒኮችን በስራዎ ስራ ላይ መጠቀም እንዲችሉ አንዳንድ ነገሮች እንዴት እንደተደረጉ ለማየት ቀላሉ መንገድ አንዱ ነው. እንደ ማንኛውም የዌብ ዲዛይነር, በተለይም በኢንዱስትሪው የመጀመሪያዎቹ ቀናት ውስጥ እንደነበሩ ሁሉ, እና ያዩዋቸው እና የሚስቡት የድረ-ገጾች ምንጭ ምንጩን በመመልከት እነሱ ኤችቲኤምኤልን የተማሩበት አስተማማኝ አማካይነት ነው. በ. የድር ንድፍ መጽሐፍትን ከማንበብ ወይም የሙያዊ ኮንፈረንሶችን ከመጎብኘት በተጨማሪ , የድረገፁ ምንጭ ኮድ ማየት መጀመር የጀማሪዎች ኤች ቲ ኤም መማር ጥሩ መንገድ ነው.
ከእንድ በላይ HTML ብቻ ያለ
ማስታወስ ያለብዎት ነገር ምንጭ ምንጭ በጣም የተወሳሰበ (እና እርስዎ እየተመለከቱት ያለው ድር ጣቢያ ይበልጥ የተወሳሰበ, የድረ-ገጽ ኮድ ይበልጥ የተወሳሰበ) ነው. እርስዎ እየተመለከቱት ያለውን ገጽ ከያዘው የኤችቲኤምኤል መዋቅር በተጨማሪም, የዚያ ጣቢያ ምስላዊ ገጽታ የሚወስኑ የ CSS (ተንሳፋፊ ቅጥ ገጽታዎች) ይኖራሉ . በተጨማሪ, ዛሬ ብዙ ድር ጣቢያዎች ከኤችቲኤምኤል ጋር የተካተቱ የስክሪፕት ፋይሎችን ያካትታሉ.
በእውነቱ እያንዳንዱ የጣቢያን የተለያዩ ገፅታዎችን የሚያነቃቁ በርካታ የ "ስክሪፕት" ፋይሎች ሊኖሩ ይችላሉ. በርግጥ, የድረ ገፁ ምንጭ ኮድ በተለይም አዲስ ነገርን የሚደጉ ከሆነ በጣም ያስቸግር ይሆናል. በዛ ጣቢያ ላይ ምን እየተካሄደ እንዳለ ወዲያውኑ ማግኘት ካልቻሉ አትበሳጩ. የ HTML ምንጭን መመልከት በዚህ ሂደት ውስጥ የመጀመሪያ እርምጃ ነው. በትንሽ ልምምድ, እነዚህ ሁሉ ክፍሎች በአሳሽዎ ውስጥ የሚያዩትን ድር ጣቢያ ለመፍጠር እንዴት በጋራ እንደሚስማሙ መገንዘብ ይጀምራሉ. ኮዱን ይበልጥ እያወቁ ሲሄዱ ከዚህ የበለጠ ለማወቅ ይችላሉ, እና ለእርስዎ አስጨናቂ አይመስልም.
ስለዚህ የአንድ ድር ጣቢያውን ምንጭ ኮድ እንዴት ይመለከቱታል? የ Google Chrome አሳሽን በመጠቀም የደረጃ በደረጃ መመሪያዎችን እነሆ.
ደረጃ በደረጃ መመሪያ
- የ Google Chrome ድር አሳሽን ይክፈቱ (ጉግል ክሮም ካልተጫነ ይህ ነጻ ነው).
- መመርመር ወደምትፈልገው ድረ ገጽ ዳስስ.
- ገጹን በቀኝ-ጠቅ ያድርጉ እና በሚታየው ምናሌ ይመልከቱ. ከዚያ ምናሌ, የገጽ ምንጭን ጠቅ ያድርጉ.
- የዚህ ገጽ ምንጭ ኮድ አሁን በአሳሽ ውስጥ በአዲስ ትር ሆኖ ይታያል.
- እንደ አማራጭ, በሲፒዩ ላይ የ CTRL + U የቁልፍ ሰሌዳ አቋራጮችን በጣቢያው ምንጭ ኮድ መስኮት ለመክፈት መጠቀም ይችላሉ. በ Mac ላይ, ይህ አቋራጭ Command + Alt + U ነው .
የገንቢ መሣሪያዎች
Google Chrome ከሚያቀርበው ቀላል የገጽ ምንጭ ምንጭ በተጨማሪ በተጨማሪ ወደ አንድ ጣቢያ እንኳን በጥልቀት ለማሰስ በከፍተኛ ገንቢ መሣሪያዎቻቸው ሊጠቀሙ ይችላሉ. እነዚህ መሣሪያዎች ኤች ቲ ኤም ኤል ብቻ እንዲታይ ብቻ ሳይሆን በኤችቲኤምኤል ውስጥ ያሉትን ክፍሎችን ለማየት ለሚተገበረው CSSም ጭምር ያስችሉዎታል.
የ Chrome ገንቢ መሣሪያዎችን ለመጠቀም:
- ጉግል ክሮምን ክፈት.
- መመርመር ወደምትፈልገው ድረ ገጽ ዳስስ.
- በአሳሽ መስኮቱ በላይኛው ቀኝ ጥግ ላይ ባለ ሶስት መስመሮች አዶውን ጠቅ ያድርጉ.
- ከምናሌው ምናሌ ላይ ተጨማሪ መሳሪያዎችን ያንዣብቡና በሚታየው ምናሌ ውስጥ የገንቢ መሣሪያዎችን ጠቅ ያድርጉ.
- ይሄ በማያ ገጹ ግራ በኩል ያለውን የ HTML ምንጭ ኮድ እና በቀኝ በኩል ያለውን የሲ.ኤስ.ኤስ. የሚያሳይ መስኮት ይከፍታል.
- በአማራጭ, በድር ገጽ ውስጥ አንድ አባል ጠቅ ማድረግ ከሆነ እና ከሚታወቀው ምናሌ ውስጥ መርጠው ከፈለጉ የ Chrome አዘጋጅ መሳሪያዎች ብቅ ይላሉ እና የመረጡት ትክክለኛ አባል በኤችቲኤምኤል ላይ ከሚታዩ የ CSS ሲቀመር ይታያሉ. አንድ የተወሰነ የጣቢያ ገጽ እንዴት እንደተዘጋጀ የበለጠ ለማወቅ ከፈለጉ በጣም ጠቃሚ ነው.
ምንጩን የህጋዊ ኮድ መመልከት ነው?
ዓመታት እያለፉ ሲሄዱ ብዙ የአዲስ ድር ንድፍ ባለሙያዎች የአንድ ጣቢያ ምንጭ ኮድ መመልከት እና ለትክክላቸው ስራቸውን እና በመጨረሻም ለሚያከናውኑት ስራ ተገቢ እንደሆነ ይጠይቁኛል. በድረ-ገጹ ላይ እንደ የራስዎ የድረ-ገጽ ኮድን የሚቀዳ እና ማስተላለፍ በእርግጠኝነት ተቀባይነት የለውም, ይህንን ኮድ በመጠቀም እንደ አውሮፕላን ማረፊያው በዚህ ኢንዱስትሪ ውስጥ ምን ያህል እድገቶች እንዳሉ ነው.
በዚህ ጽሑፍ መጀመሪያ ላይ እንደተጠቀስኩት, በአሁኑ ጊዜ የድረ ገፅ ምንጭ በመመልከት ያልተማረ ሥራ የሚያከናውኑ ባለሙያ ባለሙያን ለማግኘት ትቸገሩ! አዎ, የአንድ ጣቢያ ምንጭ ምንጭ ማየት ሕጋዊ ነው. ተመሳሳይ ኮድ ለመገንባት ያንን ኮድ እንደ መርጃ መጠቀም ጥሩ ነው. እንደ እቃ ሲነሱ እና ችግሮችን ማጋጠም በጀመሩበት ቦታ ላይ እንደመሆንዎ መጠን ኮዱን መቀበል እና ማለፉን.
በመጨረሻም የድረ-ገፃቸው ባለሙያዎች እርስ በእርሳቸው የሚማሩ ሲሆን ብዙውን ጊዜ የሚያዩት እና የሚመለከቱትን ሥራ በሚመችበት ሥራ ላይ ይሻሻላሉ ስለዚህ የድረ ገፅ ምንጭን ኮድ ለመመልከት እና እንደ የመማሪያ መሳሪያ አድርገው ይጠቀሙ.