Welcome Dear
This is the place were we learn to code.
እንኳን በደህና መጣችሁ
ይሄ እንዴት ኮድ እንደሚናደርግ የሚንማርበት ስፍራ ነው ።
የአለማችን ትልልቅ የስለላ እና የጦር ሃይል ቡድኖች እንደሚሉት ከሆነ የትኛውም መሳሪያ ከ 0 እና 1 አይበልጥም ይላሉ ምክንያቱም እነዚህ 0 & 1 ባይናሪ ኮድ ተብለው የሚጠሩ ሲሆን አለማችን ላይ ያለው የትኛውም ማሽነሪ የሚንቀሳቀሰው በዚህ ባይናሪ ኮድ ነው፤ ታዲያ ይህንን አለም ያመነበትን የትልቁን መሳሪያ ዕውቀት መጋራት አትፈልጉንም ?
የሚትፈልጉ እንደሆን ትክክለኛው ቦታ ላይ ናችሁ ከቀላል እስከ ከባድ ኮርሶችን በነፃ ፣ በአማረኛ ፣ በምርጥ አገላለፅ የሚንማርበት እና በጋራ practice የሚናደርግበት ስፍራ ይሄ ነው ።
በሉ እንግዲህ በቀን ጥቂት ደቂቃዎችን በመሰዋት ብቻ ተከፋይ የሚያረጎትን የራስዎን ስራ የሚጀምሩበትን ግሩም ዕውቀት ያካበቱ ፤ ይፍጠኑ ስልካችሁን አሰሩት ምክንያቱም ብዙ ይችላልና ።
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
This is the place were we learn to code.
እንኳን በደህና መጣችሁ
ይሄ እንዴት ኮድ እንደሚናደርግ የሚንማርበት ስፍራ ነው ።
የአለማችን ትልልቅ የስለላ እና የጦር ሃይል ቡድኖች እንደሚሉት ከሆነ የትኛውም መሳሪያ ከ 0 እና 1 አይበልጥም ይላሉ ምክንያቱም እነዚህ 0 & 1 ባይናሪ ኮድ ተብለው የሚጠሩ ሲሆን አለማችን ላይ ያለው የትኛውም ማሽነሪ የሚንቀሳቀሰው በዚህ ባይናሪ ኮድ ነው፤ ታዲያ ይህንን አለም ያመነበትን የትልቁን መሳሪያ ዕውቀት መጋራት አትፈልጉንም ?
የሚትፈልጉ እንደሆን ትክክለኛው ቦታ ላይ ናችሁ ከቀላል እስከ ከባድ ኮርሶችን በነፃ ፣ በአማረኛ ፣ በምርጥ አገላለፅ የሚንማርበት እና በጋራ practice የሚናደርግበት ስፍራ ይሄ ነው ።
በሉ እንግዲህ በቀን ጥቂት ደቂቃዎችን በመሰዋት ብቻ ተከፋይ የሚያረጎትን የራስዎን ስራ የሚጀምሩበትን ግሩም ዕውቀት ያካበቱ ፤ ይፍጠኑ ስልካችሁን አሰሩት ምክንያቱም ብዙ ይችላልና ።
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
አለማችን ላይ በጣም ብዙ የCoding Language አሉ ከእነዚህም መሃል ጥቂቱ እና አብዛኛው ሰው የሚያውቃቸው የሚከተሉት ናቸው ፦
፦ Html
:- Java Script (JS)
:- Phyton
:- Java
:- C
:- C+
:- C++
:- Kotlin
እና የመሳሰሉት ብዙዎች ሲሆኑ ከእነዚህ መሃል 10 ቋንቋዎች በጣም ታዋቂ እና በብዛት ጥቅም ላይ የሚውሉ ናቸው ፤ ቢሆንም ግን HTML ለጅማሬ የሚቀለን እና በቀላሉ በስልካችን ብዙ ነገር የሚንሰራበት መሰረት መጣያ የሆነ የፕሮግራምንግ ቋንቋ ነው ስለዚህም እኛም በስልካችን ብቻ ኮድ እያደረግን ለጅማሮ ያህል
ከ HTML PROGRAMMING LANGUAGE የሚንጀምር ይሆናል ።
፦ Html
:- Java Script (JS)
:- Phyton
:- Java
:- C
:- C+
:- C++
:- Kotlin
እና የመሳሰሉት ብዙዎች ሲሆኑ ከእነዚህ መሃል 10 ቋንቋዎች በጣም ታዋቂ እና በብዛት ጥቅም ላይ የሚውሉ ናቸው ፤ ቢሆንም ግን HTML ለጅማሬ የሚቀለን እና በቀላሉ በስልካችን ብዙ ነገር የሚንሰራበት መሰረት መጣያ የሆነ የፕሮግራምንግ ቋንቋ ነው ስለዚህም እኛም በስልካችን ብቻ ኮድ እያደረግን ለጅማሮ ያህል
ከ HTML PROGRAMMING LANGUAGE የሚንጀምር ይሆናል ።
ይህንን ትምህርት ስንማማር እየሞከርን መሄድ ስላለብን
ይሄንን App በመጫን ሙከራዎችን እየሞከርን ብንሄድ መልካም ነው ።
ይሄንን App በመጫን ሙከራዎችን እየሞከርን ብንሄድ መልካም ነው ።
HTML5 ለምን እንማራለን ?
ምክንያቱም ድረ-ገጾችን ለመገንባት ከፈለጉ HTML መማር በጣም አስፈላጊ ነው፣ HTML ካላወቁ መገንባት አይችሉም ምክንያቱም ለድር ልማት የሚውሉ ሌሎች ቋንቋዎችን ለመማር ከሚያስፈልጉት ቅድመ ሁኔታዎች ውስጥ አንዱ ነው።
ምክንያቱም ድረ-ገጾችን ለመገንባት ከፈለጉ HTML መማር በጣም አስፈላጊ ነው፣ HTML ካላወቁ መገንባት አይችሉም ምክንያቱም ለድር ልማት የሚውሉ ሌሎች ቋንቋዎችን ለመማር ከሚያስፈልጉት ቅድመ ሁኔታዎች ውስጥ አንዱ ነው።
የላይኛው ፎቶ ስብራራ
<!DOCTYPE html>፡ ይህ HTML5 የሆነውን የሰነድ አይነት ይገልጻል
• <html>፡ ይህ አካል በኤችቲኤምኤል ሰነድ ውስጥ ያሉትን ሁሉንም ነገሮች ያጠቃልላል። መለያዎችን፣ አባሎችን፣ የቅፅ ሉሆችን፣ ስክሪፕቶችን፣ ጽሑፍን፣ መልቲሚዲያን እና ሌሎችንም ያካትታል
<head> : ይህ ኤለመንት በድረ-ገጹ ዋና ይዘት ላይ የማይታይ የሰነድ meta data ይይዛል። ይህ የቅጥ ሉሆችን፣ ስክሪፕቶች፣ መለያዎችን እና ሌሎችንም ሊያካትት ይችላል።
<title> : ይህ አካል የድረ-ገጹን ርዕስ ይገልፃል; በአሳሹ የላይኛው ክፍል ላይ ይታያል
• <body>፡ ይህ ኤለመንት እንደ <h1>፣ <p>፣ <img>፣ <b>፣ <i> እና ሌሎች ብዙ ክፍሎችን ያጠቃልላል።
<h1>፡ ይህ አካል ርዕስን ይገልፃል።
<p>፡ ይህ አካል አንቀጽን ይገልፃል።
<!DOCTYPE html>፡ ይህ HTML5 የሆነውን የሰነድ አይነት ይገልጻል
• <html>፡ ይህ አካል በኤችቲኤምኤል ሰነድ ውስጥ ያሉትን ሁሉንም ነገሮች ያጠቃልላል። መለያዎችን፣ አባሎችን፣ የቅፅ ሉሆችን፣ ስክሪፕቶችን፣ ጽሑፍን፣ መልቲሚዲያን እና ሌሎችንም ያካትታል
<head> : ይህ ኤለመንት በድረ-ገጹ ዋና ይዘት ላይ የማይታይ የሰነድ meta data ይይዛል። ይህ የቅጥ ሉሆችን፣ ስክሪፕቶች፣ መለያዎችን እና ሌሎችንም ሊያካትት ይችላል።
<title> : ይህ አካል የድረ-ገጹን ርዕስ ይገልፃል; በአሳሹ የላይኛው ክፍል ላይ ይታያል
• <body>፡ ይህ ኤለመንት እንደ <h1>፣ <p>፣ <img>፣ <b>፣ <i> እና ሌሎች ብዙ ክፍሎችን ያጠቃልላል።
<h1>፡ ይህ አካል ርዕስን ይገልፃል።
<p>፡ ይህ አካል አንቀጽን ይገልፃል።
HTML Tags ( መለያዎች )
HTML መለያዎች በማእዘን ቅንፎች የተከበቡ የንጥል ስሞች ናቸው።
በ HTML ውስጥ መለያዎችን እንጀምራለን እና እንጨርሳለን። ከዚህ በታች ያለውን ምሳሌ ተመልከት.
<p> HELLO WORLD </p>
Start tag and End tag
Start tag - "መለያ መክፈት" ተብሎም ይጠራል. ምሳሌ፡ <p>
End tag - እንዲሁም "መለያ ማቆም" ተብሎም ይጠራል። ምሳሌ፡</p>
HTML ፋይሎችን የት ነው መፍጠር የምችለው?
በጽሑፍ አርታኢ ውስጥ! የኤችቲኤምኤል ፋይሎችን መፍጠር ነፃ ነው ፣ ይህንን ለማድረግ ውድ መተግበሪያዎችን ማውረድ አያስፈልግዎትም።
ኤችቲኤምኤል ፋይሎችን ለመስራት ሊጠቀሙባቸው የሚችሉ አንዳንድ ነፃ መተግበሪያዎች ከዚህ በታች ያለውን ዝርዝር ይመልከቱ።
• Notepad
• Notepad++
• TextEdit
• Atom
• Visual Studio Code
• Brackets
• QuickEdit (አንድሮይድ App )
• DroidEdit (አንድሮይድ App)
• HTML Editor (አንድሮይድ App)
• Decoder (አንድሮይድ App)
• ከዚህ ቀደም እዚህ ቻናል ላይ የለቀቅነው App የአገባብ ማድመቂያ ያለው ማይክሮ ኮድ-አርታዒ አለው እና HTML ፋይሎችን ማስቀመጥ እና መክፈት እንችላለን። እንዲሁም የኪቦርድ እርዳታ ስላለው በጣም ምርጥ Application ነው ።
HTML መለያዎች በማእዘን ቅንፎች የተከበቡ የንጥል ስሞች ናቸው።
በ HTML ውስጥ መለያዎችን እንጀምራለን እና እንጨርሳለን። ከዚህ በታች ያለውን ምሳሌ ተመልከት.
<p> HELLO WORLD </p>
Start tag and End tag
Start tag - "መለያ መክፈት" ተብሎም ይጠራል. ምሳሌ፡ <p>
End tag - እንዲሁም "መለያ ማቆም" ተብሎም ይጠራል። ምሳሌ፡</p>
HTML ፋይሎችን የት ነው መፍጠር የምችለው?
በጽሑፍ አርታኢ ውስጥ! የኤችቲኤምኤል ፋይሎችን መፍጠር ነፃ ነው ፣ ይህንን ለማድረግ ውድ መተግበሪያዎችን ማውረድ አያስፈልግዎትም።
ኤችቲኤምኤል ፋይሎችን ለመስራት ሊጠቀሙባቸው የሚችሉ አንዳንድ ነፃ መተግበሪያዎች ከዚህ በታች ያለውን ዝርዝር ይመልከቱ።
• Notepad
• Notepad++
• TextEdit
• Atom
• Visual Studio Code
• Brackets
• QuickEdit (አንድሮይድ App )
• DroidEdit (አንድሮይድ App)
• HTML Editor (አንድሮይድ App)
• Decoder (አንድሮይድ App)
• ከዚህ ቀደም እዚህ ቻናል ላይ የለቀቅነው App የአገባብ ማድመቂያ ያለው ማይክሮ ኮድ-አርታዒ አለው እና HTML ፋይሎችን ማስቀመጥ እና መክፈት እንችላለን። እንዲሁም የኪቦርድ እርዳታ ስላለው በጣም ምርጥ Application ነው ።
HTML Elements
በመጀመሪያው ትምህርት ስለ መለያዎች እና እንደ Start taf (ታግ መክፈት) እና End tag (ታግ ዝጋ) ያሉትን አጥንተናል።
HTML Element አብዛኛው ጊዜ Start tag "Element Content" እና End tag የያዘ ነው።
ለምሳሌ:
<p> Learn Coding With Us በአማርኛ </p>
ከላይ ያለው HTML Element ምሳሌ ከሚከተለው የተዋቀረ ነው።
Start tag ፡- <p>
Element Content :- Learn Coding With Us በአማርኛ
End tag ፡- </p>
Nested HTML Elements ( የተደጋገመ )
HTML አካል አንድ ወይም ከዚያ በላይ ሊይዝ የሚችልባቸው አንዳንድ አጋጣሚዎች አለ።
ለምሳሌ:-
<p><i> Nested </i><p>
ይህ ምሳሌ ያቀፋቸው ነገሮች
Start tag = <p>
Start tag = <i>
Element content = Nested
End tag = </i>
• End tag = </p>
ከላይ ባለው ምሳሌ ላይ ሁለት የመጀመሪያ መለያዎች እና ሁለት መዝግያ መለያዎች አሉ.( tags)
ሁለተኛው tag <i> በውስጡ ያለውን ጽሑፍ ሰያፍ ያደርጋል።
በመጀመሪያው ትምህርት ስለ መለያዎች እና እንደ Start taf (ታግ መክፈት) እና End tag (ታግ ዝጋ) ያሉትን አጥንተናል።
HTML Element አብዛኛው ጊዜ Start tag "Element Content" እና End tag የያዘ ነው።
ለምሳሌ:
<p> Learn Coding With Us በአማርኛ </p>
ከላይ ያለው HTML Element ምሳሌ ከሚከተለው የተዋቀረ ነው።
Start tag ፡- <p>
Element Content :- Learn Coding With Us በአማርኛ
End tag ፡- </p>
Nested HTML Elements ( የተደጋገመ )
HTML አካል አንድ ወይም ከዚያ በላይ ሊይዝ የሚችልባቸው አንዳንድ አጋጣሚዎች አለ።
ለምሳሌ:-
<p><i> Nested </i><p>
ይህ ምሳሌ ያቀፋቸው ነገሮች
Start tag = <p>
Start tag = <i>
Element content = Nested
End tag = </i>
• End tag = </p>
ከላይ ባለው ምሳሌ ላይ ሁለት የመጀመሪያ መለያዎች እና ሁለት መዝግያ መለያዎች አሉ.( tags)
ሁለተኛው tag <i> በውስጡ ያለውን ጽሑፍ ሰያፍ ያደርጋል።
ምንድን ይፈልጋሉ ወይንስ ምን ልያሰሩ አስበዋል የሚፈልጉት ሁሉ እኛጋ አንዳንዱ በነፃ አንዳንዱ በተመጣጣኝ ዋጋ አለ
፦ የፕሮግራም በራሪ ወረቀቶች
፦ Poster
፦ ሎጎ
፦ Coding assignment
:- Website
:- Phone Photography
እና የመሳሰሉትን ይጠይቁን አብረን እንሰራዋለን
Inbox = @nahinax
፦ የፕሮግራም በራሪ ወረቀቶች
፦ Poster
፦ ሎጎ
፦ Coding assignment
:- Website
:- Phone Photography
እና የመሳሰሉትን ይጠይቁን አብረን እንሰራዋለን
Inbox = @nahinax
HTML ባህሪያት( attributes )
የኤችቲኤምኤል ባህሪያት ተጨማሪ መረጃን ወደ ኤችቲኤምኤል ኤለመንት ለመጨመር ያገለግላሉ።
ማስታወስ ያለብዎት ጠቃሚ ነገሮች
• የኤችቲኤምኤል ባህሪያት በኤችቲኤምኤል መለያዎች(tag) ውስጥ ይገኛሉ።
• የኤችቲኤምኤል ባህሪያት በመነሻ መለያዎች(start tag) ላይ ብቻ ይታያሉ። በመጨረሻ መለያዎች(end tag) ላይ በጭራሽ አይሆንም።
• የኤችቲኤምኤል አባሎች ብዙ ባህሪያት ሊኖራቸው ይችላል።
• HTML ባሕሪያት በስም/እሴት ጥንዶች የተዋቀሩ ናቸው።
በሁሉም የኤችቲኤምኤል ኤለመንቶች ላይ ጥቅም ላይ ሊውሉ የሚችሉ አንዳንድ ባህሪያት በአንዳንድ Element Content ላይ ተጽዕኖ ላይኖራቸው ይችላል. እነዚያም ግሎባል ባህርያት( attributes ) ይባላሉ።
የኤችቲኤምኤል ባህሪ የሚከተሉትን ያቀፈ ነው-
1, የባህርው ስም ( ለምሳሌ :- color , width , length , align , border , span style , input type እና የመሳሰሉት )
2, የእኩል ይሆናል ምልክት እና
3, በትምህርተ ጥቅስ ምልክቶች የተከበበ "እሴት"
በአጠቃላይ ይህን ይመስላል፡ attributename="value"
ምሳሌ :- align="center" color="green" width="400px" length="500px" border="2" span style="color:green" እና የመሳሰሉት ።
ልብ ይበሉ እሴቶች ( value ) ይቀያየራል እንጂ የተቀሩት በፍፁም አይቀየሩም።
ጓደኞቻችሁን በመጋበዝ ቤተሰባችንን እያሰፋን ፣ ሃሳብ አስተያየታችሁን በ @nahinax ወይንም @boxfallon እየሰጣችሁን በአብሮነት እንድንቀጥል ይሁን
የኤችቲኤምኤል ባህሪያት ተጨማሪ መረጃን ወደ ኤችቲኤምኤል ኤለመንት ለመጨመር ያገለግላሉ።
ማስታወስ ያለብዎት ጠቃሚ ነገሮች
• የኤችቲኤምኤል ባህሪያት በኤችቲኤምኤል መለያዎች(tag) ውስጥ ይገኛሉ።
• የኤችቲኤምኤል ባህሪያት በመነሻ መለያዎች(start tag) ላይ ብቻ ይታያሉ። በመጨረሻ መለያዎች(end tag) ላይ በጭራሽ አይሆንም።
• የኤችቲኤምኤል አባሎች ብዙ ባህሪያት ሊኖራቸው ይችላል።
• HTML ባሕሪያት በስም/እሴት ጥንዶች የተዋቀሩ ናቸው።
በሁሉም የኤችቲኤምኤል ኤለመንቶች ላይ ጥቅም ላይ ሊውሉ የሚችሉ አንዳንድ ባህሪያት በአንዳንድ Element Content ላይ ተጽዕኖ ላይኖራቸው ይችላል. እነዚያም ግሎባል ባህርያት( attributes ) ይባላሉ።
የኤችቲኤምኤል ባህሪ የሚከተሉትን ያቀፈ ነው-
1, የባህርው ስም ( ለምሳሌ :- color , width , length , align , border , span style , input type እና የመሳሰሉት )
2, የእኩል ይሆናል ምልክት እና
3, በትምህርተ ጥቅስ ምልክቶች የተከበበ "እሴት"
በአጠቃላይ ይህን ይመስላል፡ attributename="value"
ምሳሌ :- align="center" color="green" width="400px" length="500px" border="2" span style="color:green" እና የመሳሰሉት ።
ልብ ይበሉ እሴቶች ( value ) ይቀያየራል እንጂ የተቀሩት በፍፁም አይቀየሩም።
ጓደኞቻችሁን በመጋበዝ ቤተሰባችንን እያሰፋን ፣ ሃሳብ አስተያየታችሁን በ @nahinax ወይንም @boxfallon እየሰጣችሁን በአብሮነት እንድንቀጥል ይሁን
Forwarded from Quality Button
Code የማድረግ እና Programmer የመሆን ፍላጎት እያላችሁ ግን እንዴት ልማር ለምትሉ ፣ ስለ Computer Science ማወቅ ለምትፈልጉ ፣ በስልክ Photo Edit እና Logo Design መስራት ለምትፈልጉ እነሆ ይሄ ቻናል የተከፈተው ለእናንተ ነው ።