HTML ትምህርት - ክፍል 5 | Semantic HTML & Flexbox

🏷️

Semantic HTML ምንድን ነው? // What is it?

Semantic HTML ማለት tags ትርጉም ያላቸው ናቸው — browser እና ሰው ሁለቱም ይረዱታል።
ከዚህ በፊት <div> ብቻ ይጠቀሙ ነበር — አሁን ትርጉም ያለው tag አለ!
Semantic HTML uses meaningful tags that describe their purpose — better for browsers, SEO, and accessibility.

💡

ምሳሌ: <div> = "ሳጥን" ብቻ, ትርጉም የለውም
<header> = "ይህ የ page ርዕስ ክፍል ነው" — ትርጉም አለው!
div has no meaning, but header/footer/nav/main tell exactly what the content is.

👁️ የ Web Page አወቃቀር — ትርጉም ያለው HTML:
How a web page is structured with semantic tags:

<header> — ርዕስ / Logo / Title

<nav> — Navigation Menu (Home, About, Contact...)

<main>
ዋና ይዘት
Main Content

<aside>
ጎን ይዘት
Sidebar

Page/section ርዕስ
Page or section header

<nav>

Navigation links
Menu links

<main>

ዋና ይዘት (አንድ ብቻ)
Main content (once per page)

ተዛማጅ ይዘት ቡድን
Group of related content

ራሱ የሚቆም ይዘት
Self-contained content

<aside>

ጎን ይዘት / sidebar
Side content

Page/section ታች
Bottom of page/section

ምስልና caption
Image with caption

semantic.html — ምሳሌ

<!DOCTYPE html>
<html>
<body>

  <header>
    <h1>EthioCode 🇪🇹</h1>
  </header>

  <nav>
    <a href="#">Home</a>
    <a href="#">ትምህርቶች</a>
    <a href="#">Contact</a>
  </nav>

  <main>
    <section>
      <h2>HTML ትምህርቶች</h2>
      <article>
        <h3>ክፍል 1 — HTML ምንድን ነው?</h3>
        <p>HTML ትምህርት...</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© 2025 @AppMinds_ET</p>
  </footer>

</body>
</html>

📐

CSS Flexbox — Layout ማሳመር // Easy Layouts

Flexbox — elements ን አቀማምጦ ለማዘጋጀት ቀላሉ CSS መንገድ ነው። ካርዶች፣ navbar፣ grid ሁሉም Flexbox ይጠቀማሉ!
Flexbox is the easiest way to arrange elements in a row or column — used for navbars, cards, and layouts.

🔑

ዋናው ነገር: parent element ላይ display: flex ማስቀመጥ ነው — ውስጡ ያሉ elements ሁሉ ይደረደራሉ!
Key: Add display:flex to the parent element — all children automatically line up!

flexbox.css — መሰረታዊ

/* Parent element ላይ flex ያስቀምጡ */
.container {
  display: flex;

  /* አቅጣጫ — Direction */
  flex-direction: row;        /* ↔ አግድም (default) */
  flex-direction: column;     /* ↕ ቁልቁል */

  /* አቀማመጥ — Justify Content (Main Axis) */
  justify-content: flex-start;  /* ← ግራ */
  justify-content: center;      /* ↔ መሃል */
  justify-content: flex-end;    /* → ቀኝ */
  justify-content: space-between; /* | ↔ | */

  /* ቁመት አቀማመጥ — Align Items (Cross Axis) */
  align-items: center;         /* ቁመቱ መሃል */
  align-items: flex-start;     /* ላይ */
  align-items: flex-end;       /* ታች */

  /* ክፍተት — Gap */
  gap: 16px;
}

⚡ ቁልፎቹን ጫን — Flexbox ቀጥታ ተለወጥ! Click buttons to change flexbox properties live!

flex-direction

justify-content

align-items

1

2

3

4

display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;

🧩

ሙሉ ምሳሌ — Navbar + Cards // Real Example

index.html — Navbar + Card Layout

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Navbar */
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1e40af;
      padding: 16px 24px;
      color: white;
    }
    nav a {
      color: white;
      text-decoration: none;
      margin-left: 20px;
    }
    /* Cards Container */
    .cards {
      display: flex;
      gap: 20px;
      padding: 30px;
      flex-wrap: wrap;
    }
    .card {
      flex: 1;
      min-width: 200px;
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

  <nav>
    <h2>EthioCode 🇪🇹</h2>
    <div>
      <a href="#">Home</a>
      <a href="#">ትምህርቶች</a>
    </div>
  </nav>

  <main>
    <div class="cards">
      <div class="card"><h3>HTML 📄</h3></div>
      <div class="card"><h3>CSS 🎨</h3></div>
      <div class="card"><h3>JS ⚡</h3></div>
    </div>
  </main>

  <footer>
    <p style="text-align:center; padding:20px; color:#64748b;">
      © 2025 @AppMinds_ET
    </p>
  </footer>

</body>
</html>

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

🏷️ Semantic tags ይጠቀሙ — <div> ብቻ አይደለም!

header, nav, main, section, article, aside, footer — ትርጉም አላቸው።
Use semantic tags instead of just divs — they give meaning to your HTML.

2

📐 display: flex — Layout ቀላሉ መንገድ

Parent element ላይ ብቻ display:flex ያስቀምጡ — ልጆቹ ይደረደራሉ።
Just add display:flex to the parent — children automatically align.

3

↔ justify-content — አግድም አቀማመጥ

center, space-between, flex-start, flex-end
Controls horizontal alignment of flex items.

4

↕ align-items — ቁመት አቀማመጥ

center, flex-start, flex-end — ቁመቱ እንዴት ይሁን
Controls vertical alignment of flex items.

🎯

Quiz // ምን ተማርን?

❓ CSS Flexbox ለማስጀመር parent element ላይ ምን property ታስቀምጣለህ?
What CSS property do you add to the parent element to start Flexbox?

A position: flex

B flex: true

C display: flex

D layout: flex

Semantic HTMLእና CSS Flexbox

Semantic HTML
እና CSS Flexbox