አለማችን ላይ በጣም ብዙ የ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 መስራት ለምትፈልጉ እነሆ ይሄ ቻናል የተከፈተው ለእናንተ ነው ።
..............ከ HTML Attributes ከባለፈው የቀጠለ
በዚህ ክፍል አንዳንድ የኤችቲኤምኤል ባህሪያትን ከምሳሌዎች ጋር እንቃኛለን።
Atrributes lang
ምሳሌ፡-
<fit lang="en-us">
የኤችቲኤምኤል ፋይል ቋንቋን ለመግለጽ የ lang ባህሪን እንጠቀማለን። ከላይ የተገለፀው ቋንቋ የአሜሪካ እንግሊዝኛ ነው።
Attributes href
ምሳሌ፡-
<a href="https://t.me/thecodersteam">Learn Coding With Us በአማርኛ 💻📱🇪🇹</a>
ይህ ኮድ የሚያሳየን ውጤት Learn Coding With Us በአማርኛ 💻📱🇪🇹 ሲሆን ጠቅ ሲደረግ ተጠቃሚው ወደ https://t.me/thecodersteam ይመራሉ።
አገናኞች የሚገለጹት መልህቅን <a> ኤለመንት በመጠቀም ነው።
ከላይ ባለው ምሳሌ ላይ የት መሄድ እንዳለበት አሳሹን ለመንገር የ href ባህሪን(attributes) ተጠቅመንበታል።
Attributes title
ምሳሌ፡-
<a href="#link" title="i serve like a tooltip">link</a>
የርዕስ ባህሪው ( title attribute ) ለኤችቲኤምኤል ኤለመንቶች የመሳሪያ ምክሮችን ይሰጣል።
እንደ አለመታደል ሆኖ በሞባይል መሳሪያዎች ላይ አይሰራም።
Attributes style
ምሳሌ፡-
<p style="font size="40px" color="gold"> Learn with us coding </p>
ይህንን ፅሁፍ HTML ላይ ብትፅፋት የሚሰጣችሁ ውጤት በወርቃማ መልክ የተፃፈ 40px ትልቅ የሆነ " Learn with us coding " የሚል ፅሁፍ ነው ።
ቤተሰቡ እንዲሰፋ ሰው መጋበዙ እንዳይረሳ ሃሳብ አስተያየታችሁንም በ @boxfallon እና በ @nahinax ይላኩልን
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
በዚህ ክፍል አንዳንድ የኤችቲኤምኤል ባህሪያትን ከምሳሌዎች ጋር እንቃኛለን።
Atrributes lang
ምሳሌ፡-
<fit lang="en-us">
የኤችቲኤምኤል ፋይል ቋንቋን ለመግለጽ የ lang ባህሪን እንጠቀማለን። ከላይ የተገለፀው ቋንቋ የአሜሪካ እንግሊዝኛ ነው።
Attributes href
ምሳሌ፡-
<a href="https://t.me/thecodersteam">Learn Coding With Us በአማርኛ 💻📱🇪🇹</a>
ይህ ኮድ የሚያሳየን ውጤት Learn Coding With Us በአማርኛ 💻📱🇪🇹 ሲሆን ጠቅ ሲደረግ ተጠቃሚው ወደ https://t.me/thecodersteam ይመራሉ።
አገናኞች የሚገለጹት መልህቅን <a> ኤለመንት በመጠቀም ነው።
ከላይ ባለው ምሳሌ ላይ የት መሄድ እንዳለበት አሳሹን ለመንገር የ href ባህሪን(attributes) ተጠቅመንበታል።
Attributes title
ምሳሌ፡-
<a href="#link" title="i serve like a tooltip">link</a>
የርዕስ ባህሪው ( title attribute ) ለኤችቲኤምኤል ኤለመንቶች የመሳሪያ ምክሮችን ይሰጣል።
እንደ አለመታደል ሆኖ በሞባይል መሳሪያዎች ላይ አይሰራም።
Attributes style
ምሳሌ፡-
<p style="font size="40px" color="gold"> Learn with us coding </p>
ይህንን ፅሁፍ HTML ላይ ብትፅፋት የሚሰጣችሁ ውጤት በወርቃማ መልክ የተፃፈ 40px ትልቅ የሆነ " Learn with us coding " የሚል ፅሁፍ ነው ።
ቤተሰቡ እንዲሰፋ ሰው መጋበዙ እንዳይረሳ ሃሳብ አስተያየታችሁንም በ @boxfallon እና በ @nahinax ይላኩልን
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
👍1
--------------ከ HTML attributes ቀጣይ ክፍል
HTML Styles
የኤችቲኤምኤል style የኤችቲኤምኤል ኤለመንቶችን ለመቅረጽ ይጠቅማሉ፣ ይህ ማለት ነባር እሴቶችን መለወጥ ማለት ነው።
ለምሳሌ፣ የ Style ስራ የጽሑፍ ቀለም ነባር እሴቶችን እንደ ጥቁር ሊለውጥ ይችላል።
የበስተጀርባ ቀለም እንደ ነጭ ፣ የጽሑፍ አሰላለፍ በግራ እና የጽሑፍ መጠን 12 ፒክስል
Internal Style Sheet (internal styling)
internal style sheet አንድ ወይም ከዚያ በላይ ካስካዲንግ ስታይል sheet (CSS) ደንብ-ስብስብ ነው።
የCSS ደንብ ስብስብ አንድ ወይም ከዚያ በላይ CSS መግለጫዎችን በሴሚኮላኖች ( / ) የተከበበ መራጭ እና የማስታወቂያ ብሎክን ያካትታል።
እያንዳንዱ መግለጫ CSS ንብረት(property) ስም(name) እና ዋጋን(value) ያካትታል፣ እናም በኮሎን ይለያል
ሁሉም በ<style> ኤለመንት ውስጥ ከአይነቱ = "text/css" ባህሪው ጋር ተዘግተዋል ይህም በ <head> ውስጥ የተካተተ ነው።
Internal Style Sheet Syntax (የውስጥ ስታይል ሉህ አገባብ)
<style type="text/css">
p { font-size: 14px; }
</style>
✔በሙሉ ማጠናከሪያ ትምህርት ውስጥ ብዙ የ Internal Style Sheet ምሳሌዎች ይኖራሉ ስለዚህ ይቀጥሉ እና ይደሰቱ!
Inline styling
Inline styling ከውስጥ የአጻጻፍ style ጋር ተመሳሳይነት ያላቸውን የCSS መግለጫዎች style በመጠቀም ክፍሎችን ለመቅረጽ ይጠቅማል።
Inline Styling Syntax
<div style="property: value; property: value;"
ይቀጥላል
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
HTML Styles
የኤችቲኤምኤል style የኤችቲኤምኤል ኤለመንቶችን ለመቅረጽ ይጠቅማሉ፣ ይህ ማለት ነባር እሴቶችን መለወጥ ማለት ነው።
ለምሳሌ፣ የ Style ስራ የጽሑፍ ቀለም ነባር እሴቶችን እንደ ጥቁር ሊለውጥ ይችላል።
የበስተጀርባ ቀለም እንደ ነጭ ፣ የጽሑፍ አሰላለፍ በግራ እና የጽሑፍ መጠን 12 ፒክስል
Internal Style Sheet (internal styling)
internal style sheet አንድ ወይም ከዚያ በላይ ካስካዲንግ ስታይል sheet (CSS) ደንብ-ስብስብ ነው።
የCSS ደንብ ስብስብ አንድ ወይም ከዚያ በላይ CSS መግለጫዎችን በሴሚኮላኖች ( / ) የተከበበ መራጭ እና የማስታወቂያ ብሎክን ያካትታል።
እያንዳንዱ መግለጫ CSS ንብረት(property) ስም(name) እና ዋጋን(value) ያካትታል፣ እናም በኮሎን ይለያል
ሁሉም በ<style> ኤለመንት ውስጥ ከአይነቱ = "text/css" ባህሪው ጋር ተዘግተዋል ይህም በ <head> ውስጥ የተካተተ ነው።
Internal Style Sheet Syntax (የውስጥ ስታይል ሉህ አገባብ)
<style type="text/css">
p { font-size: 14px; }
</style>
✔በሙሉ ማጠናከሪያ ትምህርት ውስጥ ብዙ የ Internal Style Sheet ምሳሌዎች ይኖራሉ ስለዚህ ይቀጥሉ እና ይደሰቱ!
Inline styling
Inline styling ከውስጥ የአጻጻፍ style ጋር ተመሳሳይነት ያላቸውን የCSS መግለጫዎች style በመጠቀም ክፍሎችን ለመቅረጽ ይጠቅማል።
Inline Styling Syntax
<div style="property: value; property: value;"
ይቀጥላል
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
👍1
HTML Colors(ቀለሞች)
የኤችቲኤምኤል ቀለሞች በድረ-ገጽ ላይ የምናያቸውን ቀለሞች ይገልጻሉ።
በዚህ ትምህርት የኤችቲኤምኤል ኤለመንቶችን የጽሑፍ ቀለም እና/ወይም የጀርባ ቀለም ለመቀየር ከ CSS Property Color እና ከጀርባ-ቀለም(background color) ያለው የመስመር ውስጥ ስታይሊንግ እንጠቀማለን።
የኤችቲኤምኤል ቀለሞች የሚከተሉትን በመጠቀም ሊገለጹ ይችላሉ:
• የቀለም ስም(Color Name)። ማንኛውንም ትክክለኛ ቀለም በቀለም ስሙ ይገልጻል። ለምሳሌ color="white" bgcolor="black"
• Hex Colour value ወይም ሄክሳዴሲማል የቀለም እሴት። ማንኛውንም ትክክለኛ ቀለም በሃሽታግ(#) ይገልፃል ፊደሎች እና/ወይም ቁጥሮች ለምሳሌ:- color="#fffff" bgcolor="#00000"
• RGB Color Value:- RGB ማለት ቀይ(Red)፣ አረንጓዴ(Green)፣ ሰማያዊ(Blue) ማለት ነው። ማንኛውንም የሚሰራ ቀለም በዚህ ቅርጸት ይገልፃል"rgb(ቁጥር፣ቁጥር፣ቁጥር)"ለምሳሌ rgb (255፣ 255፣ 255)፣ rgb (0፣ 0፣ 0)። ቁጥሮቹ የቀይ፣ አረንጓዴ እና ሰማያዊ ቀለሞችን መጠን በተወሰነ ቅደም ተከተል ያመለክታሉ።
ለምሳሌ፦ color="rgb(255,255,255)"
To Be Continued
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
የኤችቲኤምኤል ቀለሞች በድረ-ገጽ ላይ የምናያቸውን ቀለሞች ይገልጻሉ።
በዚህ ትምህርት የኤችቲኤምኤል ኤለመንቶችን የጽሑፍ ቀለም እና/ወይም የጀርባ ቀለም ለመቀየር ከ CSS Property Color እና ከጀርባ-ቀለም(background color) ያለው የመስመር ውስጥ ስታይሊንግ እንጠቀማለን።
የኤችቲኤምኤል ቀለሞች የሚከተሉትን በመጠቀም ሊገለጹ ይችላሉ:
• የቀለም ስም(Color Name)። ማንኛውንም ትክክለኛ ቀለም በቀለም ስሙ ይገልጻል። ለምሳሌ color="white" bgcolor="black"
• Hex Colour value ወይም ሄክሳዴሲማል የቀለም እሴት። ማንኛውንም ትክክለኛ ቀለም በሃሽታግ(#) ይገልፃል ፊደሎች እና/ወይም ቁጥሮች ለምሳሌ:- color="#fffff" bgcolor="#00000"
• RGB Color Value:- RGB ማለት ቀይ(Red)፣ አረንጓዴ(Green)፣ ሰማያዊ(Blue) ማለት ነው። ማንኛውንም የሚሰራ ቀለም በዚህ ቅርጸት ይገልፃል"rgb(ቁጥር፣ቁጥር፣ቁጥር)"ለምሳሌ rgb (255፣ 255፣ 255)፣ rgb (0፣ 0፣ 0)። ቁጥሮቹ የቀይ፣ አረንጓዴ እና ሰማያዊ ቀለሞችን መጠን በተወሰነ ቅደም ተከተል ያመለክታሉ።
ለምሳሌ፦ color="rgb(255,255,255)"
To Be Continued
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡
🖥💻📱⌨️🖥🛡@thecodersteam🖥💻📱⌨️🖥🛡