የመጀመሪያ ድር ጣቢያዎን መፍጠር 10 ደረጃዎች

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

በዚህ መማሪያ ውስጥ የተገናኘ የቅጥ ሉህ እና በይነተገናኝ የጃቫስክሪፕት ፋይል ያለው መሠረታዊ የድር ገጽ መገንባት ይማራሉ።

ደረጃ 1 አቃፊዎን መፍጠር

ለማከማቸት የምንፈጥራቸው ፋይሎች አቃፊ ይፍጠሩ። እርስዎ ቢፈልጉም ለመሰየም ነፃነት ይሰማዎት ፣ የት እንደሚገኝ ያስታውሱ ፣ ምክንያቱም እኛ በኋላ ላይ ፋይሎችን እናስቀምጥለታለን።

ደረጃ 2 - የመጀመሪያ ፋይልዎን መፍጠር

ተወዳጅ የጽሑፍ አርታዒዎን ይክፈቱ። በእኔ ሁኔታ እኔ አብሮ የተሰራውን የዊንዶውስ 10 ማስታወሻ ደብተር እጠቀማለሁ አንዴ አዲስ ፋይል ካገኙ በኋላ የሚከተለውን ይተይቡ

አስተማሪ በሆነው ወደ እርስዎ ያመጣው የመጀመሪያ ድር ጣቢያዬ ይህ ነው

የኤችቲኤምኤል መለያ በመባል የሚታወቀው ይህ ነው። እሱ ለርዕሰ -ጉዳዩ ይቆማል 1. በዚህ መለያ ውስጥ የምናስቀምጠው ጽሑፍ በገጹ ላይ እንደ አርዕስት ሆኖ ይታያል። እንዲህ ተከፍቶ ተዘግቷል። በሁለቱ መለያዎች መካከል ያለው ጽሑፍ በድር አሳሽዎ ውስጥ የሚታየው ነው። የተናገረው ክፍል ያንን መለያ በደረጃ x የምንጠቅስበትን አንድ ባህርይ እየሰጠ ነው። ያ አንዴ ከተጠናቀቀ ይቀጥሉ እና ፋይሉን በደረጃ 1 ባደረግነው አቃፊ ውስጥ እንደ index.html ያስቀምጡ።

ደረጃ 3: ፋይሉን ይክፈቱ

አሁን እኛ በፈጠርነው አቃፊ ውስጥ ወደ ፋይሉ ማሰስን ጨርሰናል ፣ ፋይሉን በቀኝ ጠቅ ያድርጉ እና “ክፈት” የሚለውን አማራጭ ይምረጡ እና የሚጠቀሙበት የድር አሳሽ ይምረጡ። በእኔ ሁኔታ ይህ google chrome ነው። አሁን የከባድ ሥራዎን ድካም እስካሁን ይመልከቱ!

ደረጃ 4 - ገጽዎን ማስጌጥ

እንደዚያ ነው ፣ የእኛ ድር ጣቢያ በጣም ግልፅ ነው። ነገሮችን በጥቂቱ ለመቅመስ እንደ ካድዲንግ የቅጥ ሉህ ተብሎ የሚጠራውን እንጨምራለን። አዲስ የጽሑፍ ፋይል ይፍጠሩ እና የሚከተለውን ይተይቡ

h1 (ቀለም: ሰማያዊ; text-align: center;}

እኛ እዚህ ለአሳሹ የምንነግረው በ h1 መለያ ውስጥ ማንኛውንም ንጥረ ነገር (በደረጃ 2 የተማርነው) ማግኘት እና ሰማያዊ ቀለምን መስጠት እና በገጹ መሃል ላይ ማስተካከል ነው። ይህንን ፋይል በደረጃ 1 በፈጠርነው አቃፊ ውስጥ እንደ style.css ያስቀምጡ።

ደረጃ 5 Style.css ን ከእርስዎ Index.html ጋር ያገናኙት

በዚህ ጊዜ እርስ በእርስ የማያውቁ ሁለት የተለያዩ ፋይሎች አሉን። እኛ እሱን ለማመልከት የምንፈልገውን የ ‹style.css› ፋይል እንዳለን እና አንዳንድ የቅጥ ዘይቤን ለመያዝ የ index.html ፋይልችንን መንገር አለብን። ይህንን ለማድረግ የእኛን የ index.html ፋይል በእኛ የጽሑፍ አርታኢ ውስጥ እንከፍታለን ፣ እና ከ h1 መለያችን በላይ የአገናኝ መለያ ተብሎ የሚጠራውን እንጨምራለን። የአገናኝ መለያው ስያሜው እንደሚያመለክተው እንዲሁ ወደ አንድ ነገር ያገናኛል። በእኛ ሁኔታ የቅጥ ሉህ። ይቀጥሉ እና ይተይቡ። የአገናኝ መለያው የራስ መዘጋት መለያ ስለሆነ የማጠናቀቂያ መለያ አያስፈልግም። ሪል ግንኙነቱን የሚያመለክት ሲሆን href እኛ የምንጠቅሰው የውጭ ፋይላችን የሚገኝበትን የመረጃ ጠቋሚ ፋይልን ይነግረዋል። አሁን ያንን index.html ፋይል ያስቀምጡ።

ደረጃ 6: አዲስ ቅጥ ያጣ ገጽዎን ይመልከቱ።

ደረጃ 3 ን እንደገና ይጎብኙ እና የድር ገጽዎን እንደገና ይጫኑ እና ለውጦቹ እንዴት እንደሚያንፀባርቁ ይመልከቱ።

ደረጃ 7 - አዝራር መፍጠር

በጽሑፍ አርታኢዎ ውስጥ የ index.html ፋይልዎን እንደገና ይክፈቱ እና የሚከተለውን ይተይቡ

እኔን ጠቅ ያድርጉ!

እና ፋይሉን ያስቀምጡ። ይህ በገጹ ላይ የአዝራር አባል ይፈጥራል። አንዴ ከተቀመጠ ፣ በደረጃ 3 እንደሚታየው ፋይሉን እንደገና ይክፈቱ እና አዝራሩ በገጽዎ ታችኛው ግራ ክፍል ውስጥ መሆኑን ያረጋግጡ።

ደረጃ 8 የጃቫስክሪፕት ፋይልዎን ይፍጠሩ

በመጨረሻ የእኛን የጃቫስክሪፕት ፋይል እንፈጥራለን። ጣቢያችንን በይነተገናኝ የሚያደርገው ይህ ነው። የጽሑፍ አርታኢን ይክፈቱ እና የሚከተለውን ይተይቡ

document.querySelector ("#አዝራር"). addEventListener ("ጠቅ አድርግ" ፣ ተግባር () {

document.querySelector ("#ርዕስ"). innerText = "ዝንብ ላይ ያለውን ርዕስ መቀየር"

})

እኛ እያደረግን ያለነው በአዝራሩ መታወቂያ ያለው ኤለመንት እንዲያገኝልን ሰነዱን በመጠየቅ ላይ ነው ፣ እና ወደ ርዕስ ርዕስ በሚለው መታወቂያ አንድ ንጥረ ነገር ጽሑፍን በመለወጥ ቁልፉ ለጠቅታ ክስተት ምላሽ እንዲሰጥ እናደርጋለን። . በደረጃ 1 በፈጠርነው አቃፊ ውስጥ ፋይሉን እንደ button.js ያስቀምጡ።

ደረጃ 9 የጃቫስክሪፕትዎን እና የመረጃ ጠቋሚ ፋይሎችን ያገናኙ

በ style.css ፋይል እንዳደረግነው ስለ ጃቫስክሪፕት ፋይላችን የእኛን index.html ፋይል መንገር አለብን። እስካሁን ካደረግነው ሁሉ በታች ከታች የሚከተለውን ይተይቡ

የስክሪፕት መለያው ለገፃችን ተግባራዊነት ለመስጠት የስክሪፕት ቋንቋን (በእኛ ሁኔታ ፣ ጃቫስክሪፕት) እንድናክል ያስችለናል። እኛ አዝራር. Js የተባለ ፋይል እንዲፈልግ እና በውስጡ ያለውን ኮድ በሙሉ ወደ የመረጃ ጠቋሚው ፋይላችን እንዲያክል እየነገረን ነው። አንዴ ያንን ከተየቡ በኋላ ፋይሉን ያስቀምጡ እና በደረጃ 3 እንደሚታየው ፋይሉን እንደገና ይክፈቱ።

ደረጃ 10: አዲስ የተፈጠረውን አዝራር ይፈትሹ

አሁን ይቀጥሉ እና አዝራሩን ጠቅ ያድርጉ እና የርዕሱን ለውጥ ይመልከቱ!

እንኳን ደስ አላችሁ !! አሁን የመጀመሪያውን በይነተገናኝ የድር ገጽዎን ፈጥረዋል! እኔ የሚገርመኝ አሁን የምታውቁትን እያወቃችሁ ምን ያህል ተጨማሪ ትወስዳላችሁ ??