ለጀማሪዎች የራስዎን ድር ጣቢያ መገንባት 5 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:31

እርስዎ የኮምፒተር ፕሮግራመር የመሆን ሕልም አልዎት ወይም አንድ ድር ጣቢያ ይጠቀሙ ፣ እኛ እንጋፈጠው ፣ ሁላችንም ማለት ይቻላል ፣ የመረጃ ቴክኖሎጂ የንግድ ሥራ የጀርባ አጥንት ሆኗል። ምንም እንኳን መርሃግብሩ መጀመሪያ ላይ ትንሽ አስፈሪ ቢመስልም ፣ ግቤ ከዚህ የድርጊት ትምህርት በኋላ እርስዎ የራስዎን ድር ጣቢያ ማድረግ እንዲችሉ የድር ዲዛይን መሰረታዊ መሰረታዊ ነገሮችን ማስተማር ነው። ከመንገዱ ውጭ ፣ ወደ እሱ እንሂድ!

አቅርቦቶች

• ማኪንቶሽ ወይም ዊንዶውስ ፒሲ (ምንም እንኳን ሊኑክስ ስርጭቶችም ጥቅም ላይ ሊውሉ ቢችሉም ፣ ይህ የጀማሪ መግቢያ ስለሆነ አሁን እዘለላቸዋለሁ)።
• የጽሑፍ አርታዒ ምርጫዎ (በዊንዶውስ ላይ የማስታወሻ ደብተር ፣ TextEdit በ Mac ላይ) ወይም የ IDE ምርጫዎ። በእኔ ተሞክሮ ፣ የእይታ ስቱዲዮ ኮድ ለራሴ በተሻለ ሁኔታ እንዲሠራ አግኝቻለሁ ፣ ስለሆነም እዚህ እንዲፈትሹት እመክራለሁ- https://code.visualstudio.com/ በሁሉም የስርዓተ ክወና መድረኮች ላይ ይሠራል።

ደረጃ 1: መለያዎች እና የታሪክ ትንሽ

አንዴ የጽሑፍ አርታኢ ወይም አይዲኢ ምርጫዎን ከወሰኑ ፣ ከመሠረታዊዎቹ እንጀምር።

ብታምኑም ባታምኑም ፣ ኤችቲኤምኤል ወይም HyperText Markup Language አሁን ለ 30 ዓመታት ያህል የቆየ ሲሆን በየዓመቱ በቋንቋው ላይ ብዙ መሻሻሎች እየመጡ ነው። አሁን ፣ እርስዎ ይጠይቁ ይሆናል ፣ አንድ አሳሽ በማያ ገጹ ላይ ምን እንደሚቀመጥ ይተረጉመዋል? ይህ በጥቂት ክፍሎች ውስጥ ይከናወናል-

የኤችቲኤምኤል ሰነድ ቅርጸት ቀላል ነው። ራስ እና አካል በመባል የሚታወቁ ሁለት ክፍሎች አሉዎት። የድር ጣቢያ ኃላፊ ለተጠቃሚው የማይታየውን ኮድ ይ containsል። ይህ የቅጥ ሉሆችን ለማገናኘት እና ለጣቢያው በትክክል ለማሳየት አስፈላጊ የሆኑትን ሌሎች አስፈላጊ ነጥቦችን ለማወጅ ያገለግላል። ጭንቅላቱን በመከተል ፣ ሰውነት እንደሚሰማው ፣ የድር ጣቢያው አካል ነው። ድምጽዎን ለመናገር እና አድማጮቹን ድንቅ የኤችቲኤምኤል ችሎታዎችዎን የሚያሳዩበት ይህ ነው! አሁን ጽሑፍን ወደ ሰውነት መተየብ እና እርስዎ በሚፈልጉት መንገድ በትክክል ማሳየትን ያህል ቀላል አይደለም ፣ ግን እኛ መለያዎች ብለን የምንጠራቸውን ነገሮች ከመጠቀም አንፃር ያን ያህል ቀላል ነው።

አንዳንድ መሠረታዊ የኤችቲኤምኤል መለያዎች እነ areሁና ፦

• ርዕስ - የገጹ ርዕስ ምን እንደሆነ ለአሳሹ ለመንገር የሚያገለግል። የድረ -ገጽ ትርን ሲመለከቱ ያዩትም ይህ ነው።
• h1 ፣ h2 ፣ h3 ፣ h4 - ለተለያዩ የራስጌ መጠኖች የሚያገለግሉት h1 ትልቁ እና h4 ትንሹ ከሆኑት ጋር። በሚቀጥለው ክፍል በዚህ ላይ የበለጠ እሸፍናለሁ።
• p - አንቀጽ ፣ የጽሑፍ አንቀጾችን ለመጻፍ የሚያገለግል። በወረቀት ላይ እንደ አንቀጾች።
• br - እረፍት ፣ ከጽሑፉ ጋር በመስመር ላይ ዕረፍትን የሚያስገባ።
• ሀ - እንደ ጠቅ ሊደረግ የሚችል አገናኝ ያሉ ወደ ሌሎች ገጾች አገናኞችን ለመፍጠር የሚያገለግል።
• img - ምስልን ከድረ -ገጹ ጋር ለማገናኘት የሚያገለግል።
• ul ፣ ol ፣ li - ያልታዘዙ ዝርዝሮች ፣ የታዘዙ ዝርዝሮች እና ንጥሎችን ይዘርዝሩ።
• - በዋናው ተጠቃሚ የማይታየውን በኮዱ ውስጥ የመስመር ውስጥ አስተያየቶችን ለመስጠት ያገለግላል።

እና አንዳንድ የ CSS መለያዎች (ምስላዊ) እዚህ አሉ

• ቀለም - ለአንድ የተወሰነ አካል አንድ የተወሰነ ቀለም ለመመደብ ወይም በድረ -ገጹ ላይ ለማቀናበር የሚያገለግል።
• ቅርጸ-ቁምፊ-በገጹ ላይ የቅርፀ ቁምፊውን መጠን ለመለወጥ የሚያገለግል።
• ዳራ-ቀለም-የአንድ የተወሰነ አካል ወይም መላውን ገጽ የጀርባ ቀለም ለመቀየር ያገለግላል።

እኔ ትንሽ የጠፋብዎ ሆኖ ከተሰማዎት እርስዎን ለመርዳት ትንሽ የማታለያ ወረቀት አያይዣለሁ ፣ ግን አይጨነቁ ፣ እሱን በአጭር ጊዜ ውስጥ ያገኙታል! በተጨማሪም ፣ www.w3schools.com ለማንኛውም የፕሮግራም ጥያቄዎችዎ ድንቅ ሀብት ነው። እነሱ በእርግጥ አንድ ጊዜ ወይም በጣም አድነዋቸዋል።

በመሠረቱ አሳሹ ፋይሉን እንዴት እንደሚያነብ ቀላል ነው። በመስመር ይሄዳል እና ሂደቶች በተግባሩ ይሰራሉ። ቁምፊዎቹ እንደዚህ ያለ መለያ ለማወጅ ያገለግላሉ

እና የመሳሰሉትን መለያ ለመዝጋት ያገለግላሉ

. ይህ አስፈላጊ ነው ፣ አለበለዚያ አሳሹ የሚቆምበት አይደለም። መካከል

እና

መለያዎች ፣ የሚፈልጉትን ሁሉ የሚገቡበት ነው!

ደረጃ 2 የአርታዒ ማዋቀር

አሁን ስለ ኤችቲኤምኤል ድርጣቢያ መሠረታዊ ነገሮች ትንሽ ከሸፈን ፣ እንውጣ እና ለራሳችን እንሞክረው። ለዚህ ቀጣዩ ደረጃ ድር ጣቢያውን ፕሮግራም ለማድረግ የእይታ ስቱዲዮ ኮድ እጠቀማለሁ ፣ ግን ማስታወሻ ደብተር ወይም TextEdit ን በመጠቀም የበለጠ ምቾት ካገኙ የኮዱ አቀማመጥ ተመሳሳይ ይሆናል።

በማስታወሻ ደብተር ውስጥ;

• በማስታወሻ ደብተር ፣ ፕሮግራሙ ለመጀመር እጅግ በጣም ቀላል በሆነ ባዶ ፋይል ይጀምራል። ይህ ደግሞ የ VS ኮድ ከመጠቀም ጋር ሲነፃፀር ጥቂት እርምጃዎችን እንድንዘል ያስችለናል። በትክክለኛው ቅርጸት ፋይሉን በማስቀመጥ እንጀምር።
• ጠቅ ያድርጉ ፋይል> አስቀምጥ
• በመቀጠል ለ. አስቀምጥን ጠቅ ያድርጉ።

በ VS ኮድ ውስጥ

• ሁሉንም የ IDE ባህሪዎች ለመጠቀም ለእርስዎ በጣም ጥሩው መንገድ ፋይሉን በመፍጠር እና ለ IDE ምን ዓይነት ፋይል እንደሆነ በመነሳት መጀመር ነው። ይህ እንደሚከተለው ሊከናወን ይችላል-
• ጠቅ ያድርጉ ፋይል> አዲስ ፋይል
• ባዶ ፋይል ይከፈታል
• በመቀጠል ፣ ምንም እንኳን ባዶ ቢሆንም ፋይሉን በማስቀመጥ መጀመር ይፈልጋሉ ፣ ምክንያቱም ይህ አይዲኢ የመጨረሻው ምርት ምን ዓይነት ፋይል እንደሚሆን እንዲገነዘብ ያስችለዋል። በሚያስቀምጡበት ጊዜ የ.html ቅጥያውን በፋይሉ ስም መጨረሻ ላይ ማካተትዎን ያረጋግጡ። አስቀምጥን ጠቅ ያድርጉ።

ደረጃ 3 የብሉፕሪንትስ

የእርስዎን የፋይል ስም.html ፋይል በተሳካ ሁኔታ ካስቀመጡ በኋላ ለድር ገፃችን ማዕቀፍ በመፍጠር እንጀምር። ቀሪውን የኤችቲኤምኤል ገጽ መፍጠር ከመጀመራችን በፊት የትኛውን የፋይሉ ቁልፍ ክፍሎች ማወጅ እንዳለብን ከላይ ያስታውሱ። ጠቃሚ ምክር-ለጣቢያው ማዕቀፉን ሲጀምሩ ፣ የ DOCTYPE HTML መለያ ለአሳሹ ይነበባል የሚያነበው ፋይል የኤችቲኤምኤል ፋይል ነው። በአንድ ፋይል ውስጥ የተለያዩ የኮድ ዓይነቶች ካሉዎት እና በአስተርጓሚዎች መካከል መቀያየር ከፈለጉ ይህ ሊጠቅም ይችላል። ለዚህ አስተማሪ ወሰን ፣ እኛ በዚህ ላይ ብዙ አንነካም ፣ ግን ከዚህ አስተማሪ በኋላ ስለ ኤችቲኤምኤል ልማት የበለጠ ለመፈለግ ከፈለጉ ፣ እሱን ለመስጠት ነፃነት ይሰማዎ። ለምርጥ ልምምድ በፋይሉ አናት ላይ ያለውን የ DOCTYPE HTML መለያ አስገባለሁ። ጋር መክፈት እና መዝጋት ያስታውሱ።

ፕሮግራምን ከመጀመርዎ በፊት ፋይሉን ማስቀመጥ ጠቃሚ የሚሆነው እዚህ ነው ፣ አሁን አይዲኢ ከኤችቲኤምኤል ፋይል ጋር እየሠራ መሆኑን ስለሚያውቅ ፣ አገላለጽን ለመጨረስ እና የአስተያየት ጥቆማዎችን ለመስጠት intellisense ን ይጠቀማል ፣ ምክንያቱም መለያ በድንገት መዝጋት እንዳይረሱ።. ማስታወሻ ደብተርን ለሚጠቀሙ ፣ ውስጠ -ገብነት በ IDE ውስጥ እንደሌለ ልብ ይበሉ። የጭንቅላት እና የአካል መለያዎችን እንደሚከተለው እንጀምራለን- (ሁለተኛውን ምስል ይመልከቱ)።

አሁን የሰነድ ማዋቀሩ ከተጠናቀቀ በኋላ ወደ ውድድሮች ወርደን ትንሽ መዝናናት ችለናል!

ደረጃ 4: ኮድ; ኮድ; ኮድ;

አዲስ ለተፈጠረው ፋይላችን ርዕስ በማስገባት መጀመር እንችላለን። የሚፈልጉትን ሁሉ ያስገቡ። ያስታውሱ ይህ በአሳሹ ትር ውስጥ የሚታየው ስም ነው። እንዲሁም ወደ ጣቢያችን ርዕስ በመግባት እንጀምር። ይህንን እንዴት እንደምናደርግ ከበፊቱ ያስታውሱ። H1/2/3/4 ሰማሁ? ትክክል ነው!

ከመቀጠላችን በፊት የእኛ ለውጦች በአሳሹ ውስጥ እንዴት እንደሚያንጸባርቁ በእውነተኛ ጊዜ ለማየት በአሳሽ መስኮት ውስጥ ፋይላችንን መክፈት ጠቃሚ ሆኖ አግኝቼዋለሁ። ፋይሉን ለማስቀመጥ ፋይል> አስቀምጥን ጠቅ በማድረግ የኤችቲኤምኤል ፋይል ወደተቀመጠበት አቃፊ በመሄድ ይህንን ማድረግ ይችላሉ ፣ ለእኔ ይህ ዴስክቶፕ ነው ፣ እና ፋይሉን ለመክፈት የመረጡትን አሳሽ ይጠቀሙ እና ያንን ይመለከቱታል ፣ የእርስዎ ድር ጣቢያ አለ! ማሳሰቢያ - እኔ በግሌ እኔ በኮምፒተርዬ ላይ እንደ ምርጫዬ አሳሽ ሳፋሪን እጠቀማለሁ ፣ ሆኖም ግን ፣ በድር ልማት ውስጥ ፋየርፎክስ ከእያንዳንዱ የድር ስክሪፕት ቋንቋ ጋር በሚሠራበት ጊዜ ለመፈተሽ የወርቅ ደረጃ አሳሽ ነው።

እንደሚመለከቱት ፣ ርዕሱ በትሩ ላይ እየታየ ፣ እንዲሁም የእኛን h1 ርዕስ ማየት ነው። በ IDE ውስጥ ለውጥ ሲያደርጉ እና ሲያስቀምጡ ፣ ለውጦቹ በአሳሹ ውስጥ ፈጣን እንደሚሆኑ ፣ ሁለቱንም የፋይሉ የአሳሽ መስኮት ከ IDE ጎን መከፈት እመርጣለሁ።

በኤችቲኤምኤል ማድረግ በሚችሏቸው የተለያዩ ነገሮች መለያዎችን ለመጨመር እና ለመጫወት ለመሞከር ነፃነት ይሰማዎ። ከዚህ በታች እንደሚመለከቱት ፣ ጥቂት አንቀጾችን ፣ እረፍቶችን ፣ የውጫዊ አገናኝን ወደ Instructables.com ፣ ምስል (ወይም ከውጭ ምንጭ ወይም የ. HTML ፋይል ከተከማቸበት ተመሳሳይ ማውጫ ውስጥ ሊገናኝ ይችላል) ፣ ያልታዘዘ ዝርዝር ምሳሌ ፣ የታዘዘ ዝርዝር ፣ እና በመጨረሻም አስተያየት።

አንዳንድ ቀለሞችን እና የዝግጅት አማራጮችን ለማከል መሞከር ከፈለጉ በፋይሉ ራስ ውስጥ የቅጥ መለያ ማስገባት ይችላሉ። ይህ ከኤችቲኤምኤል ወደ ሲኤስኤስ የሚሸጋገርበት ነጥብ ነው ነገር ግን ለእይታ ሲባል ይህ እንዴት እንደሚሰራ ለማየት ጥቂት መስመሮችን እገባለሁ። በመሠረቱ ሲ.ኤስ.ኤስ እንዴት እንደሚሰራ ቅንብሮችን በመጠቀም የኤችቲኤምኤል አባሎችን በተግባሮች ውስጥ እንዲቆጣጠሩ ያስችልዎታል {} ለተወሰነ የኤችቲኤምኤል ኮድ ኮድዎን ያስገቡ።

ደረጃ 5 የመጨረሻ ሀሳቦች

እና እዚያ አለዎት; የመጀመሪያውን ድር ጣቢያዎን በተሳካ ሁኔታ ፈጥረዋል! ይህ የጀማሪ መመሪያ ስለሆነ በኤችቲኤምኤል ውስጥ የመጀመሪያ ተሞክሮዎን አስደሳች እንዲሆን እፈልጋለሁ። በእኔ ተሞክሮ ውስጥ ለመማር በጣም ጥሩው መንገድ ወደ ውስጥ ዘልቆ በመግባት ነገሮችን መሞከር ፣ በኮድዎ ምን ማድረግ እንደሚችሉ ማየት እና እንዲሁም ኮድዎን እንዴት መስበር እንደሚችሉ ማየት ነው። ይህ ታማኝነትን ይገነባል እና ኮዱ በሚሰራበት መንገድ እንዴት እና ለምን እንደሚሰራ በተሻለ ለመረዳት ይረዳዎታል። ያስታውሱ። አንድ ነገር እና የደስታ ኮድ መስጠትን እንደተማሩ ተስፋ እናደርጋለን!