በመጀመሪያው ክፍል:
<h1> </h1>
በዚህ ክፍል ደግሞ፣
✅link ማስገባት፣
✅button መስራት፣
✅ምስል ወይም photo እንዴት አድርገን ማስገባት እንደምንችል እናያለን።
ብዙ ዌብሳይቶች ላይ ስንገባ የተለያዩ ፎቶዎች እናያለን።ፎቶ ደግሞ የተለያዩ ኩነቶችን በምስል የሚያሳይልን በመሆኑ ምክኒያት ፔጃችን ላይ ለተለያዩ ጉዳዮች ልንፈልገው እንችላለን።እንዲሁም ዌብ ፔጃቹህ ላይ የሚታዩ ምስሎችን እንዴት አንድ Screen reader user መረዳት እንዲችል የምታግዙበትን መንገድ እናያለን።
አሁን ከፔጃችን ላይ ፎቶ ልናስገባ ነው! ዝግጁ ናቹህ?
✅በመጀመሪያ፣ ፎቶ ለማስገባት ስናስብ፣ የምናስገባውን ፎቶ ፋይል ኔም ማወቅ አለብን።ይህም ብቻ ሳይሆን፣ በፊት የፈጠርነውን የHTML file እና ፎቷችንን አንድ ፎልደር ላይ ብናስቀምጠው ጥሩ ነው።በዕርግጥ፣ ብራውዘራችንን ኢንተርኔት ላይ ፎቶ Fetch አድርጎ እንዲያሳይም ማድረግ ይቻላል።ይህንን በቀጣዩ ክፍል የምናየው ይሆናል።
✅አሁን ባለፈው ሳምንት መስራት የጀመርነውን ፔጅ ኖትፓድን ወይም ሌላ እናንተ የሚመቻችሁን text editor በመጠቀም ክፈቱ። እኔ "Visual studio code"ን ነው የምጠቀመው።
✅ፎቶ ለማስገባት፣ <imgነው የምንጠቀመው።ሲመስለኝ፣ Img stands for "Images".
<img
✅በመጀመሪያ የምናደርገው ነገር፣ ባለፈው ክፍል የፈጠርነው ዌብ ፔጅ ላይ በመሄድ ከርሰራችንን<p>HTML stands for hyper text markup language</p>መጨረሻ ላይ እናደርጋለን።
<p>HTML stands for hyper text markup language</p>መጨረሻ ላይ እናደርጋለን።
✅በመቀጠልም፣ የሚከተለውን ኮድ እንጽፋለን።<img src="screenshot.jpg">
<img src="screenshot.jpg">
✅እስኪ አሁን የጻፍናቸውን ኮዶች አንድ በአንድ እንይ።
✅ይህ ኮድ ፎቶ ለማስገባት ስንፈልግ የምንጽፈው ቀዳሚው ኮድ ነው። አሁን Img የሚባል element ከፍተናል።
src="screenshot.jpg">
✅ይህ ኮድ ደግሞ በ Img element ውስጥ src የሚባል atribute እንድናስገባ የሚረዳን ነው።በዚህ 1 መስመር ኮድ ውስጥ በ quotation mark ውስጥ የገቡ ፊደሎች አሉ።ማለትም፣ "Screenshot.jpg" የፎቷችን ፋይል ኔም ነው።
✅እዚህ ላይ መርሳት የሌለባቹህ ነገር ቢኖር፣💭የፎቶውን file name በ quotation mark ማስገባት፣💭የፋይል ኔሙ ኤክስቴንሽን እንዳይረሳ መጠንቀቅ፣ ለምሳሌ እኔ የተጠቀምኩት የፎቶው ፋይል ኔም ፋይል ኤክስቴንሽን፣ .jpg ነው።💭በመጨረሻም፣ የ > ምልክት መጨመር እንዳይረሳ ትኩረት መስጠት ነው።
ይህንን ርዕስ ከማጠናቀቃችን በፊት፣ የscreen reader users ፎቷችንን እንዲረዱት እንዴት አድርገን discription እንደምንጨምርላቸው እናያለን።
አንድን ነገር ስንሰራ የምንሰራው ነገር ሁሉንም ያማከለ መሆኑን ማረጋገጥ ይኖርብናል። ብዙ ጊዜ web developers በተለይ ኢትዮጵያ ውስጥ ያሉ አብዛኞቹ ዌብሳይቶች የ accessibility issue ይነሳባቸዋል። ይህ ለምን ሆነ? ዌብ ፔጃቸው ላይ የሚያስገቧቸውን ፎቶዎች ብዙ ጊዜ ያለ discription ነው የሚተውት።
በፊት ያስገባችሁትን ፎቶ ምንም አይነት discription ካልገባበት፣ አንድ screen reader user የሚሰማው ነገር "graphic" ብቻ ይሆናል። ይህ ማለት የዌብሳይታቹህ screen reader user ሊያውቅ የሚችለው፣ ፔጁ ላይ ፎቶ መኖሩን ብቻ ነው። ተጠቃሚውን ለመርዳት የሚከተለውን አድርጉ።
<img src="screenshot" alt="This is screenshot.">
ቀደም ብሎ ከነበረው ኮዳችን ምን የተለየ ነገር አስተዋላቹህ?
የተለየው ኮድ፣ alt="This is screenshot."ነው ካላቹህ ትክክል ናቹህ! 🥳🥳🥳
alt="This is screenshot."
alt="This is screenshot
የሚለው ኮድ ለ screen readers softwares የፎቶው discription "This is screenshot" እንደሆነ ይነግርልናል ማለት ነው።
✅ስለዚህ፣ ከላይ የተጻፈውን ኮድ ዌብ ፔጃቹህ ላይ ስታስገቡ፣ የscreen reader ተጠቃሚው፣"graphic this is screenshot"የሚል feedback ይሰማል ማለት ነው።
ሊንክ በዌብ ፔጅ ውስጥ መጠቀም የማይቀር እና አስፈላጊ element ነው።web page ላይ ሊንኮች በሁለት ይከፈላሉ።
በመጀመሪያ internal link ዌብ ፔጃችን ላይ እንዴት አድርገን እንደምናስገባ እናያለን።
ብዙ ጊዜ ዌብሳይቶችን browse ስናደርግ፣ "go to top" የሚል ሊንክ ልናገኝ እንችላለን። ወይም ደግሞ፣ article ስናነብ፣ ተመሳሳይ page ያሉ የተለያዩ ርዕሶች በtable of content መልክ ተቀምጠው ልናገኝ እንችላለን። ይህም የሚሆነው፣ internal link በመጠቀም ነው። የሚከተሉትን ኮዶች በመጻፍ go to top የሚል ሊንክ መስራት እንችላለን።
🥇በመጀመሪያ፣ ሊንክ ለማስገባት የምንጠቀመው tag, <aነው።
<a
በመቀጠልም href=""የሚል attribute እናስገባለን። በquotes መካከል፣ ሊንካችንን እናስገባለን
href=""
ከዚህ ሁሉ በፊት ግን፣ 1 heading ከ id attribute ጋር መስራት ይጠበቅብናል።ልክ እንደዚህ!
<h1 id="top">this the top place</h1>
በመቀጠልም፣ internal link እናስገባለን።
<a href="#top">go to top</a>
ይህንን ኮድ ኮድ ኤድተራቹህ ላይ በመጻፍ ብራውዘራቹህ ምን አይነት ውጤት እንደሚያሳያቹህ ንገሩኝ።
አሁን ደግሞ የአንድን web page link ወደ እኛ page እንዴት አድርገን እንደምናስገባ እናያለን።
ይህንን ስናደርግ ሁሌም https:// ወይም http:// የሚለውን ማስቀደም ይኖርብናል። ሙሉ ኮዱን አሁን ልጻፍላቹህ።
<a href="https://www.google.com">google</a>
አሁን ያደረግነው የጉግልን ዌብሳይት ሊንክ ወደ እኛ ፔጅ ማስገባት ነው! አሁን ይህንን ኮድ save አድርጋቹህ በፈለጋቹህት ብራውዘር ብትከፍቱት፣ google የሚል ሊንክ ታገኛላቹህ። እርሱንም click ስታደርጉ፣ ወደ google ብራውዘራቹህ ይወስዳችኋል።
ይህንን ክፍል ከማጠናቀቃችን በፊት፣ የመጨረሻውን ርዕስ እንይ።
buttons በ wweb page ላይ በተደጋጋሚ ልናየው የምንችል element ነው። ጥቅሙም ብዙ አይነት ሲሆን፣ ለምሳሌ: የሆነን button click ስናደርግ ወደ ፈለግነው የ web site አድራሻ ተጠቃሚዎቻችን ለመውሰድ ስንፈልግ እንጠቀምበታለን።በዕርግጥ፣ ከላይ እንዳየነው፣ ተጠቃሚዎቻችን ሊንኩን click ሲያደርጉ ወደ ሌላ website, file ወይም ከተመሳሳይ page ካለ ርእስ እንዲሄዱ ለማድረግ የምንጠቀመው ሊንክን ወይም <a </a> እንደሆነ እናውቃለን። ነገር ግን፣ አንድን ሊንክ በበተን ኤለመንት ውስጥ ማስገባት ከፈለግን የሚከተለውን ኮድ እንጽፋለን።
<a </a>
<a href="https://www.google.com> <button> go to google</button>
ከላይ የተጻፈው ኮድ፣ go to google የሚል button ይፈጥራል። አሁን "go to google" የሚለው button click ሲደረግ፣ ወደ google ይወስዳል ማለት ነው።
ስናጠቃልለው፣ button ለመስራት የምንጠቀመው tag<button> </button> ነው።
<button> </button>
button ያለ link ለመስራት፣ ይህንን እንጽፋለን። <button>go to google</button>
<button>go to google</button>
የመጨረሻውን ኮድ ተጠቅመን የፈጠርነው button ከበፊቱ button ጋር ተመሳሳይ ነው። ነገር ግን፣ መጨረሻ ላይ የተፈጠረው button click ሲደረግ ምንም አይነት action ብራውዘራችን አይወስድም። ምክኒያቱም፣ ከበተኑ ጋር ያያያዝነው ምንም አይነት task ስለሌለ።
አንድ በተን task እንዲኖረው ለማድረግ የjava script code ያስፈልገናል። በቀጣይ ጊዜ እንዴት አድርገን ለበተኖች በ java script አማካኝነት task እንደምንሰጣቸው እናያለን።
or,
To get more updates from me, Joine my telegram channel.