Web Development For Absolute Beginner
🌐🌐🌐🌐🌐🌐🌐
ጤና ይስጥልኝ ዛሬ በዝች ፅሁፍ የመጀመርያ ዌብሳይታችንን እንሰራለን።
ይህን ዌብሳይት ለመስራት ከሚያስፈልጉን ነገሮች ውስጥ አንደኛው ኮድ ኤዲተር(Code editor) ነው ይህንንም የኢንተርኔት አገልግሎት በኮምፒውተር ላይ ከሌላቹ ከራሱ ኦፕሬቲንግ ሲስተም ላይ ተጭኖ የመጣ ሶፍትዌር ስላለ እሱን እንጠቀማለን።(ለወደፊት ግን ሌላ ሶፍትዌር ዳውንሎድ አድርገን እንጭናለን)
በዚህ ፅሁፍ የምንጠቀመው ኖት ፓድ(Notepad) የሚባለውን የዊንዶውስ ሶፍትዌር ሲሆን እሱንም ለመክፈት ሁለት መንገዶች አሉ።
1- ስታርት ሜኑን ክሊክ በማድረግ ወደ ኦል ፕሮግራምስ በመጫን (All programs) ቀስታችንን ወደ አክሰሰሪስ (Accessories) ስንነካ ኖትፓድ(Notepad) ሚለውን እናገኛለን።
2- ስታርትን በመጫን ሰርች ማድረግያ(Search box) ውስጥ Notepad ብሎ በመፃፍ መጀመርያ ሚመጣውን ሶፍትዌር መክፈት።
ከላይ ከተጠቀሱት መንገዶች አንዱን በመጠቀም ከከፈታችሁ ምንም ፅሁፍ የሌለው ቴክስት ኤዲተር ታገኛላችሁ። በዛሬው ፅሁፍ ላይ የምንጠቀመው ቋንቋ HTML(HyperTextMarkupLanguage) የሚባለውን ነው። HTML ራሱን የቻለ የፕሮግራሚንግ ቋንቋ ባይሆንም ሁሉም ዌብሳይት የHTML ኮድ ሊኖረው ግድ ይላል። ብዙ ጊዜ ዌብሳይት ለመስራት ከሚያስፈልጉ ቋንቋዎች ውስጥ HTML, Css እና javascript የሚባሉት ይጠቀሳሉ እንዚህም መሰረታዊ የዌብሳይት ቋንቋዎች ናቸው።(ተጨማሪ ትምህርቶች በቅርቡ ይዘን የምንቀርብ ይሆናል።) የHTML ጥቅም አንዱ የምንሰራውን ዌብሳይት ማደራጀት ነው።
HTML በውስጡ html elements የሚባሉ ስብስቦችን አቅፏል እነዚህም የተለያዩ ነገሮችን ከፋፍለን እንድንይዝ ይረዱናል። የኤችቲኤምኤል ኤለመንት በታግ(tag) ይወከላል ይህም html tag ተብሎ ይጠራል። HTML tag ለመፃፍ በመጀመርያ "" ምልክት እናስቀምጣለን። ከላይ የፃፍነው የሚከተለውን መልክ ሊኖረው ይገባል።
ይህ ከላይ ያስቀመጥነው opening tag (ኦፕኒንግ ታግ) የሚባል ሲሆን ከስሙ እንደምንረዳው ከላይ የፃፍነው የተከፈተ ታግ እንደሆነ ነው። ከላይ የከፈትነውን ታግ ለመዝጋት ደግሞ እንደመጀመርያው "" የሚለውን እንፅፋለን ይህም የሚከተለውን ሊመስል ይገባል።
ከላይ የመክፈቻውን ታግ እና የመዝግያውን ታግ በአንድ ላይ ስንፅፈው
የሚለውን እናገኛለን። በመቀጠል በፃፍነው ታግ መሀከል ላይ እንዲታይ የምንፈልጋቸውን ነገሮች እንደፈለግን እንፅፋለም ይህም እንደሚከተለው ይሆናል።
This is a content
አሁን ከላይ የተማርነውን መሰረት በማድረግ HTML ላይ ያሉትን ታጎች በመጠቀም ዌብሳይታችንን እንሰራለን።
ማንኛውም ዌብሳይት ከመስራታችን በፊት በመጀመርያው መስመር ላይ ብለን እንፅፋለን ይህም ለብሮውሰሩ(browser) የኤችቲኤምኤል ቨርዥን 5(version 5) እንደምንጠቀም ይነግረዋል።
በመቀጥል ከታች ብለን እንፅፋለን ይህም root element (ሩት ኤለመንት) ተብሎ ይጠራል።ይህም ማንኛውም ምንፅፋቸው ኮዶችን አቅፎ ይይዛል። ከዚህ በኋላ ያሉትን ኮዶች ለመረዳት እንዲቀላችሁ በየደረጃው እፅፈዋለው።
እስካሁን የፃፍነው ከታች ያለውን ሊመስል ይገባል።
ከዚህ በመቀጠል ታግ ውስጥ opening head tag (በውስጡ head የሚል ስም ያለው ታግ) እንከፍት እና እንዘጋለን ። ከዚያም ከ head tag መዝግያው ታች ብለን እንቀጥላለን ይህም ከታች ያለውን ይመስላል።
ከላይ የፃፍነው head tag እና body tag የተለያዩ ወሳኝ ጥቅሞች አሏቸው። የመጀመርያው head tag በዌብሳይቱ ላይ የማይታዩ ነገር ግን ለብሮውሰሩ መረጃ የሚሰጡትን ታጎች አቅፎ ይይዛል ከእነዚህም መሀከል የሚባለው ተጠቃሽ ነው ይህም የዌብሳይቱን ስም ልንፅፍበት እንችላለን። ከታች ለዚህ ምሳሌ እንፃፍ
This is a title
ከላይ አስተውላችሁ ከተመለከታችሁ title ሚለውን ታግ ወደ ውስጥ ስፔስ አድርጌ ፅፌዋለው ይህም ለማንበብ እንዲረዳኝ ነው እናንተም እንዲህ ካደረጋችሁ ወደፊት ብዙ ኮድ ስትፅፉ አይቸግራችሁም።(ይህ በፅሁፍ ሲሆን ስለማይታይ ከታች ባስቀመጥኩት ፎቶ ላይ መመልከት ትችላላችሁ።) ብዙ ስፔስን በተን ከመንካት በኪቦርዳችን ላይ ያለውን tab በተን መንካት ጊዜን ይቆጥብልናል። ከዚህ በመቀጠል ፋይላችንን ሴቭ እናደርጋለን እሱን ለማድረግም በቀስታችን file ሚለውን በመንካት ከዚያም save as ሚለውን በመጫን ወይም ኮንትሮል S (ctrl s) በመንካት የሚመጣው ዊንዶ ላይ ስሙን የፈለጋችሁትን ከሰጣችሁ ቡሀላ .html ብላችሁ ቀጥላችሁ ፃፉ ይህም
Yourfilename.html
ሊሆን ይገባል። በመቀጠል ሴቭ ካረጋችሁበት ቦታ(directory) የብሬውሰር ምልክት ያለው እና እናንተ የፃፋችሁት ስም ታገኛላችሁ እሱንም ስትከፍቱ ራሱ ብሮውሰሩን ይከፍታል። አሁን ምንም የሚታይ ነገር የለም ነገር ግን ታብ(tab) አከባቢ ቅድም title ታግ ላይ የፃፋችሁት ፅሁፍ እንዳለ አስተውሉ። እሱን ካያችሁ በትክክል ሄዳችኋል ማለት ነው።
በመቀጠል body tag የሚባለውን ጥቅሙን እንረዳለን። ይህ ታግ በዌብሳይታችን ላይ እንዲታይ ምንፈልጋቸውን ነገሮችች ምንፅፍበት ታግ ነው። ለምሳሌ ይህ ታግ ርእስ የምንፅፍበት ነው ቅድም በፃፍነው ኮድ ላይ ይህንን ታግ በመፃፍ እንሞክር።የሚከተለውንም ይመስላል::
This is a title
Hello world!
I just created a website.
ይህንን ሴቭ አድርጋችሁ ቅድም የከፈታችሁት ዌብሳይት ካለ ሪሎድ(reload) በማድረግ ወይም በድጋሚ በመክፈት ለውጡን ታያላችሁ።
እስካሁን የተነጋገርነውን አደረጋችሁ? ውጤቱንም አገኛችሁ? እንኳን ደስ አላችሁ የመጀመርያችሁን ዌብሳይ ሰርታችኋል። በሚቀጥሉት ክፍሎች በዚ ትምህርቶች ስላሉ ተከታተሉን ፔጁን ላይክ እና ሼር በማድረግ ይተባበሩን። በሌላ ክፍል እስክንገናኝ ሰላም ቆዩን።
አዘጋጆች
👨💻
@Programmer_ET👨💻
@tech_programmer
