HTML TABLE

An HTML table is used to display data in a structured format with rows and columns. Here's the basic syntax of an HTML table:

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
</head>
<body>
    <h2>Student Grades</h2>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>Ali</td>
            <td>Math</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Fatima</td>
            <td>Science</td>
            <td>B</td>
        </tr>
        <tr>
            <td>Ahmed</td>
            <td>English</td>
            <td>A</td>
        </tr>
    </table>
</body>
</html>

Explanation:

1. <table>: Defines the table.


2. <tr>: Represents a table row.


3. <th>: Defines a table header cell (bold and centered by default).


4. <td>: Defines a table data cell.

Html table

In HTML tables, rowspan and colspan are attributes used to merge cells across multiple rows or columns.

1. rowspan

Combines (spans) a cell across multiple rows in a table.

Used when you want a single cell to stretch downward into multiple rows.


Example:

<table border="1">
    <tr>
        <th rowspan="2">Name</th>
        <td>Math</td>
    </tr>
    <tr>
        <td>Science</td>
    </tr>
</table>

2. colspan

Combines (spans) a cell across multiple columns in a table.

Used when you want a single cell to stretch sideways into multiple columns.


Example:

<table border="1">
    <tr>
        <th colspan="2">Subjects</th>
    </tr>
    <tr>
        <td>Math</td>
        <td>Science</td>
    </tr>
</table>

Hello, Ethio Coders family!

Congratulations to everyone! We’ve reached 1k subscribers This is a big step forward, and it’s all because of your amazing support and interest in learning coding.

Let’s keep this momentum going! Together, we can continue exploring, learning, and growing our coding skills. Remember, every expert was once a beginner. Stay curious, keep practicing, and never stop learning.

Thank you for being part of this journey. Let’s aim for even bigger milestones ahead!

Join us here: Ethio Coders Channel.

spck appn አጠቃቀሙ ያልገባቹ
link 👇👇👇
https://vm.tiktok.com/ZMkHkoH7q/

<Video> tag and <Audio> tag

ቪዲዮ tag እና ኦዲዮ tag በHTML ውስጥ ለቪዲዮ እና ኦዲዮ ፋይሎችን ለመያዝ እና ለማሳየት የሚጠቅሙ ናቸው። እነዚህ tagኦች የሚጠቀሙት ድምጽ እና ቪዲዮን በድረ-ገጽዎ(website ) ላይ ለማስገባት ነው።

1. ቪዲዮ ታግ (<video>):

ቪዲዮ tag በድረ-ገጽዎ ላይ ቪዲዮ ለማሳየት ያገለግላል። ይህ ታግ በቀላሉ ቪዲዮን ያስገባል እና ተጠቃሚዎች ቪዲዮውን ማጫወት፣ ማቆም፣ ድምጽ መቆጣጠር እና ሌሎች ባህሪያትን እንዲጠቀሙ ያስችላቸዋል

ለምሳሌ

<video width="320" height="240" controls>
  <source src="example.mp4" type="video/mp4">
  </video>

💥width እና height: ቪዲዮውን ስፋት እና ቁመት ይገልጻል።

💥controls: ይህ አባሪ ተጠቃሚዎች ቪዲዮውን ማጫወት፣ ማቆም፣ ድምጽ መቆጣጠር እና ሌሎች ቁልፎችን እንዲጠቀሙ ያስችላቸዋል።
💥 <source>: ይህ ታግ የቪዲዮ ፋይልን አድራሻ እና አይነቱን ይገልጻል።

2. ኦዲዮ tag (<audio>):

ኦዲዮ ታግ በድረ-ገጽዎ ላይ ድምጽ ለማሳየት ያገለግላል። ይህ ታግ በቀላሉ ኦዲዮን ያስገባል እና ተጠቃሚዎች ኦዲዮውን ማጫወት፣ ማቆም፣ ድምጽ መቆጣጠር እና ሌሎች ባህሪያትን እንዲጠቀሙ ያስችላቸዋል።

ምሳሌ:


<audio controls>
  <source src="example.mp3" type="audio/mp3">
  <audio>

💥controls: ይህ አባሪ ተጠቃሚዎች ኦዲዮውን ማጫወት፣ ማቆም፣ ድምጽ መቆጣጠር እና ሌሎች  ያስችላቸዋል።
💥<source>: ይህ ታግ የኦዲዮ ፋይልን አድራሻ እና  ማጠቃለያ ነው:



እነዚህ ታጎች በድረ-ገጽዎ ላይ ቪዲዮ እና ኦዲዮን በቀላሉ ለማስገባት እና ለማሳየት ያገለግላሉ።

Recap of Our Incredible Live Session with Birhan Nega

We had an amazing session with Birhan Nega, diving deep into his inspiring journey. His story is a true testament to hard work, resilience, and continuous learning. Here’s a recap of our conversation:

1. Birhan’s Journey:Growing up in a remote village with no electricity or internet, Birhan faced many challenges. Yet, through dedication and persistence, he became a senior software developer, working with top companies worldwide.

Your background does not define your future—your effort does.

2. Learning Mindset & Problem-Solving Approach
Birhan loves to challenge himself and believes that “If something is difficult, the reward is big.”

He doesn’t just learn for the sake of learning—he always connects what he learns to real-world applications. He constantly asks:
✔ Why is this important?
✔ Where and when can I apply this?

This mindset helps him prioritize what’s truly valuable and stay focused.

Whenever he encounters a new topic, he prepares in advance by reading, researching, and understanding the subject before class. This proactive approach helped him grasp complex concepts quickly and apply them effectively.

4. Software Development is a Skill—Not Just a Degree
One of the most important insights Birhan shared is that software development is a skill that must be developed through practice.

University alone is not enough—students need to:
✔ Work on personal projects
✔ Gain hands-on experience
✔ Develop their problem-solving abilities

5. The Power of Self-Learning & Mastering Fundamentals
Success in software development requires continuous self-learning and adaptability. Building a strong foundation in fundamentals and Being open to learning new technologies

Once you build a strong foundation, learning other programming languages becomes easier.

6. The Importance of Soft Skills
Technical skills alone won’t make you successful. Soft skills play a crucial role in showcasing your technical ability.

Birhan highlighted that if your communication, time management, and productivity skills are weak, they can overshadow your technical strengths.

7. The Value of Networking & Collaboration
Your network and the people you surround yourself with have a huge impact on your growth.

8. Insights on Freelancing & Personal Branding
Birhan also shared valuable freelancing tips, emphasizing the importance of:
✔ Finding your niche – Specialize in something that sets you apart
✔ Showcasing your skills – Build projects that demonstrate your expertise
✔ Focusing on client needs – Align your skills and experience with what clients are looking for

When applying for freelance jobs or remote positions, focus on:
✔ The value you bring
✔ How your skills match the client’s requirements
✔ Proving your ability through real-world projects

10. AI & the Future of Work
Birhan has a practical approach to AI. Instead of worrying about AI replacing jobs, he focuses on how AI can enhance his work.

11. Self-Marketing & Visibility
To stand out in today’s competitive job market, you need to make yourself and your work visible.

12. Never Stop Learning & Growing
Beyond university and certificates, real success comes from continuous self-improvement.

Birhan’s final advice:
✔ Always seek knowledge beyond the classroom
✔ Read books, do research, and invest in personal growth
✔ Stay teachable—there’s always something new to learn

Personal effort and dedication are what make a developer truly competitive.

This session was full of inspiration, practical insights, and valuable lessons.

A huge thank you to Birhan Nega for sharing experiences with us! His journey is a reminder that hard work, continuous learning, and the right mindset can take you anywhere.

@edemy251

ሰላም ለ Ethio coder ቤተሰብ! 👋 እንዴት ናችሁ?  ይህንን ቻናል ስለተቀላቀላችሁ በጣም ደስ ብሎኛል! 🥰 የኮዲንግ ጉዞአችሁ ስኬታማ እንዲሆንና ከዚህ ቻናል ብዙ ጥቅም እንድታገኙ አንዳንድ ምክሮችን ላካፍላችሁ እወዳለሁ። 😊

1.ንቁ ተሳትፎ: በቻናሉ ላይ በሚለቀቁት ቪዲዮዎችና ጽሁፎች ላይ ንቁ ተሳትፎ አድርጉ። 🧐 ጥያቄዎችን ጠይቁ፣ 🤔 አስተያየታችሁን አካፍሉ፣ 💬 በውይይቶች ተሳተፉ። 🗣️ ይህ እርስ በርስ እንድንማማርና ዕውቀታችንን እንድናሳድግ ይረዳናል። 🤝

2. ተከታታይነት: የኮዲንግ ትምህርት ተከታታይነትን ይጠይቃል። 🗓️ በቻናሉ ላይ የሚለቀቁትን ትምህርቶች በስርዓት በመከታተልና ልምምድ በማድረግ እውቀታችሁን አሳድጉ። 💻⌨️

3.ትብብር: በቻናሉ ውስጥ ካሉ ሌሎች አባላት ጋር ይተባበሩ። 🤝 እርስ በርሳችሁ ተረዳዱ፣ 💪 ችግሮችን በጋራ ለመፍታት ሞክሩ። 🧩 የጋራ ትብብር ለስኬት ቁልፍ ነው። 🔑

4. የተለያዩ ምንጮች: በ"ኢትዮ ኮደር" ቻናል ላይ ብቻ ሳይሆን ከሌሎች የተለያዩ ምንጮችም (እንደ መጽሐፍት፣ 📚 ድረ-ገጾች፣ 🌐 ሌሎች ቻናሎች 📺) እውቀትና መረጃዎችን ለማግኘት ሞክሩ። ይህ ሰፋ ያለ እይታ እንዲኖራችሁ ይረዳል። 👀

5.ትዕግስት: ኮዲንግ መማር ጊዜና ትዕግስት ይጠይቃል። ⏳ በሂደት ችግሮች ሊያጋጥሙ ይችላሉ። 🚧 ነገር ግን ተስፋ ሳትቆርጡ በጽናት ከቀጠላችሁ በእርግጠኝነት ስኬታማ ትሆናላችሁ። 🏆

6.ፍቅርና ተነሳሽነት: ለኮዲንግ ፍቅርና ተነሳሽነት ይኑራችሁ። ❤️‍🔥 ኮዲንግን በምታደርጉበት ጊዜ ደስታና እርካታ ከተሰማችሁ በፍጥነት ትማራላችሁ። 😊

Ethio coder ለእናንተ ሁሌም ዝግጁ ነው። 💯 ማንኛውም ጥያቄ ካላችሁ ወይም እርዳታ ከፈለጋችሁ እኛን ለማነጋገር አትፍሩ። 💬

በመጨረሻም፣ ethio coder የኮዲንግ ጉዞአችሁ ስኬታማ እንዲሆንላችሁ ይመኛል። 🙏

ቻናላችንን ስለተቀላቀላችሁ እናመሰግናለሁ! 🎉

ምክራችንን ከወደዳቹት ሀሳባቹን በ emoji or sticker ግለጹልን!!

https://t.me/Muju_man_coding

Advice for beginners about html

1. ጀምር በቀላል ነገር (Start Simple):
HTML መሰረታዊ ነገሮችን በመማር ጀምር። እንደ ርዕሶች (<h1> to <h6>), አንቀጾች (<p>), መስመሮች (<br>), እና ምስሎች (<img>) ያሉትን ነገሮች ተማር። 🧱 እነዚህ ነገሮች የድረ-ገጽህን መሰረት ይገነባሉ። ልክ እንደ ቤት ሲሰራ በመጀመሪያ ግድግዳውን እንደምትሰራ ማለት ነው። 🏠
ውስብስብ ኮድ ውስጥ አትግባ። ትንሽ በትንሽ በመማር ላይ አተኩር። 🐢 አንድ ነገር በደንብ ከተረዳህ በኋላ ወደሚቀጥለው ርዕስ ሂድ። 🚶‍♂️

2. ተግባራዊነት (Practice is Key):
HTML ኮድ መጻፍ ብቻውን በቂ አይደለም። የጻፍከውን ኮድ በድር አሳሽህ ላይ (እንደ Chrome ወይም Firefox) ክፈትና ውጤቱን ተመልከት። 💻👀 ይህ አካሄድ ኮድህ እንዴት እንደሚሰራ በተሻለ እንድትረዳ ይረዳሃል። ልክ እንደ መኪና መንዳት መጽሐፍትን ከማንበብ ይልቅ በተግባር መንዳት እንደሚሻል ማለት ነው። 🚗💨
ትንንሽ ፕሮጀክቶች ላይ ስራ። ቀላል የድረ-ገጽ ክፍሎችን ለመስራት ሞክር። ለምሳሌ፣ ስለራስህ ወይም ስለምትወዳቸው ነገሮች አንድ ገጽ ፍጠር። 📝 እየሰራህ በሄድክ ቁጥር በራስ መተማመንህ ይጨምራል። 💪

3. የሚረዱህ ምንጮች (Find Helpful Resources):
በይነመረብ ላይ ብዙ ነፃ የ HTML ትምህርቶች አሉ። W3Schools በጣም ጥሩ ከሚባሉት ውስጥ አንዱ ነው። 🌐📚 በተጨማሪም፣ ዩቲዩብ ላይ ብዙ የቪዲዮ ትምህርቶች አሉ። ▶️ እነዚህን ምንጮች በመጠቀም እውቀትህን አስፋ። 🧠
የአማርኛ ትርጉም ያላቸውን ምንጮች ለመፈለግ ሞክር። 🤔 ምንም እንኳን ብዙ ባይኖሩም፣ መፈለግህ አይቀርም። በተጨማሪም፣ የእንግሊዝኛ ቃላትን ቀስ በቀስ ለመረዳት ሞክር። HTML በአብዛኛው በእንግሊዝኛ ነውና። 🇬🇧
ከሌሎች ፕሮግራመሮች ጋር ተገናኝ። በኦንላይን ፎረም ወይም በማህበራዊ ሚዲያ ቡድኖች ውስጥ መሳተፍ ጠቃሚ ነው። 🤝💬 ጥያቄዎችህን መጠየቅና ከሌሎች መማር ትችላለህ።

4. ትዕግስትና ጽናት (Be Patient and Persistent):
HTML መማር ጊዜ ይወስዳል። አትቸኩል። ⏳ በሂደትህ ላይ ትዕግስት ሁን። አንዳንድ ጊዜ ነገሮች ሊከብዱ ይችላሉ፣ ነገር ግን ተስፋ አትቁረጥ። 😓➡️😊 ልክ እንደ ማንኛውም አዲስ ነገር መማር ጊዜ እና ትጋት ይጠይቃል። 🧗‍♂️
ስህተቶችን አትፍራ። ሁሉም ፕሮግራመሮች ስህተት ይሰራሉ። ዋናው ነገር ከስህተቶችህ መማር ነው። ስህተት ሲያጋጥምህ፣ ችግሩን ለመፍታት ሞክር። 🐞 መፍትሄውን ካላገኘህ፣ እርዳታ ጠይቅ። 🆘

5. ተዝናናበት (Have Fun!):
HTML መማር አስደሳች ሊሆን ይችላል። ድረ-ገጾችን በመፍጠር ተዝናና። የምትወዳቸውን ነገሮች በድረ-ገጽህ ላይ አካትት። ይህ የመማር ሂደቱን የበለጠ አስደሳች ያደርገዋል። 🎉🤩


ጠቃሚ ምክር: ኮድህን በምጽፍበት ጊዜ, ተጨማሪ አስተያየቶችን (comments) ብትጽፍበት, ለወደፊት ኮድህን ስትመለከት ይበልጥ ቀላል ይሆንልሃል።

መልካም እድል! 👍

ሰላም! 👋 HTML፣ CSS እና JavaScript ምን እንደሆኑ፣ ልዩነታቸውና እንዴት ጥቅም ላይ እንደሚውሉ በቀላል አማርኛ እንመልከት። እንዲሁም እነዚህን ቴክኖሎጂዎች ለመማር የሚያነሳሳ ምክር እሰጣለሁ። 😊

HTML (HyperText Markup Language):
HTML ማለት የድረ-ገጽ (website) አጽም ነው። 🧱 ልክ እንደ ቤት ግድግዳና ጣሪያ፣ HTML የድረ-ገጹን መሰረታዊ መዋቅር ይፈጥራል። በHTML በመጠቀም ጽሑፎችን፣ 🖼️ ምስሎችን፣ 🎥 ቪዲዮዎችን እና ሌሎች ይዘቶችን በድረ-ገጹ ላይ እንዴት እንደምናሳይ እንወስናለን። HTML "tags" በሚባሉ ምልክቶች በመጠቀም ይሰራል። ለምሳሌ፣ <p> የሚለው ምልክት አንቀጽ ለመጀመር፣ <img> ደግሞ ምስል ለማስገባት ያገለግላል።

CSS (Cascading Style Sheets):
CSS ማለት የድረ-ገጹን ገጽታ (style) የምንቆጣጠርበት ቋንቋ ነው። 🎨 ልክ እንደ ቤት ቀለም እና የቤት እቃዎች፣ CSS ለድረ-ገጹ ውበት እና ማራኪነት ይሰጣል። ✨ በCSS በመጠቀም የጽሑፎችን ቀለም፣ ቅርጸ-ቁምፊ (font)، መጠን፣ የጀርባ ቀለም (background color) እና ሌሎች የንድፍ ባህሪያት ማስተካከል እንችላለን። CSS HTMLን የበለጠ ቆንጆ 😍 እና ለተጠቃሚ ምቹ ያደርገዋል። 👍

JavaScript:
JavaScript ማለት ለድረ-ገጹ ተለዋዋጭነት (dynamic) እና ተግባራዊነት የምንሰጠው ቋንቋ ነው። ⚙️ ልክ እንደ ቤት የኤሌክትሪክ መስመር፣ JavaScript በድረ-ገጹ ላይ የተለያዩ ተግባራት እንዲከናወኑ ያስችላል። ለምሳሌ፣ አንድ ቁልፍ ሲጫን አንድ ነገር እንዲሆን፣ ወይም አንድ ፎርም ሲሞላ መረጃው እንዲላክ በJavaScript እንጽፋለን። JavaScript ድረ-ገጾችን በይነተገናኝ (interactive) ያደርጋቸዋል። 🚀

ልዩነታቸው በአጭሩ:
HTML: የድረ-ገጹ መዋቅር (structure) 🧱

CSS: የድረ-ገጹ ገጽታ (style) 🎨

JavaScript: የድረ-ገጹ ተግባራዊነት (functionality) ⚙️

ለምን መማር አለብን? 🤔
እነዚህን ቴክኖሎጂዎች መማር ብዙ ጥቅሞች አሉት።
የራስዎን ድረ-ገጽ ይፍጠሩ: የፈለጉትን አይነት ድረ-ገጽ፣ ጦማር (blog) ✍️ ወይም የመስመር ላይ መደብር 🛍️ መፍጠር ይችላሉ።

የድር ልማት (web development) ሙያ ይኑርዎት: የድር ልማት በዓለም ላይ በጣም ተፈላጊ ከሆኑ ሙያዎች አንዱ ነው። 👨‍💻👩‍💻

የፈጠራ ችሎታዎን ይግለጹ: ድረ-ገጾችን በመፍጠር ሃሳቦችዎን እና ችሎታዎን ለዓለም ማካፈል ይችላሉ።💡

የተሻለ ግንዛቤ: የቴክኖሎጂውን ዓለም እና እንዴት እንደሚሰራ መረዳት ይችላሉ። 🤓

የሚያነሳሳ ምክር:

በትንሹ ይጀምሩ: በአንድ ጊዜ ሁሉንም ነገር ለመማር አይሞክሩ። መሰረታዊ HTML፣ CSS እና JavaScriptን በመማር ይጀምሩ። ✅

ተለማመዱ: በተቻለዎት መጠን ኮድ ይጻፉ እና ይሞክሩ። "Practice makes perfect" እንደሚባለው በተግባር ብዙ ይማራሉ! ⌨️

ምንጮችን ይጠቀሙ: ብዙ ነጻ የመማሪያ ምንጮች፣ እንደ ዩቲዩብ ቪዲዮዎች፣ የመስመር ላይ ትምህርቶች እና መጽሐፍት አሉ። 📚

ትዕግስት ይኑርዎት: መማር ጊዜ ይወስዳል፣ ስለዚህ አይበሳጩ። በጽናት ይቀጥሉ! persevering_face

ማህበረሰብን ይቀላቀሉ: ከሌሎች ተማሪዎች እና ፕሮፌሽናል ድር ገንቢዎች ጋር ይገናኙ። እርስ በርስ መረዳዳት እና መማር ጠቃሚ ነው። 🤝

እነዚህን ምክሮች በመከተል እና በጽናት በመማር፣ የድር ልማት ችሎታዎን ማዳበር እና ስኬታማ የድር ገንቢ መሆን ይችላሉ። 👏 መልካም እድል! 👍🎉


https://t.me/Muju_man_coding

Submission date 18/6/2017 Wednesday

Time is up
ሳዓታቹ አልቆዋል

🎉 Congratulations, Ethio Coders Family! 🎉

🚀 We’ve officially reached 2K subscribers! 🚀

This is just the beginning—let’s keep learning, coding, and growing together! 💻🔥

🥳🎊 Thank you for being part of this amazing journey! 🎊🥳