HTML ትምህርት - ክፍል 4

📊

HTML Tables — ሰንጠረዥ // Table Tags

Table — መረጃ በረድፍና ዓምድ ለማሳየት ይጠቅማል። Excel spreadsheet ይመስላል!
Tables display data in rows and columns — like a spreadsheet!

📌

Table የሚሰሩ Tags:
<table> → ሰንጠረዡ ይጀምራል | <tr> → ረድፍ (row) | <th> → ርዕስ ዓምድ (header) | <td> → ተራ ዓምድ (data cell)

table.html

<table border="1">

  <!-- ርዕስ ረድፍ (Header Row) -->
  <tr>
    <th>ስም</th>
    <th>ዕድሜ</th>
    <th>ከተማ</th>
  </tr>

  <!-- የ data ረድፎች -->
  <tr>
    <td>አበበ</td>
    <td>25</td>
    <td>አዲስ አበባ</td>
  </tr>

  <tr>
    <td>ሰላም</td>
    <td>22</td>
    <td>ሐዋሳ</td>
  </tr>

  <tr>
    <td>ዳዊት</td>
    <td>30</td>
    <td>ባህር ዳር</td>
  </tr>

</table>

👁️ Browser ላይ እንዲህ ይታያል: This is how it looks in the browser:

ስም	ዕድሜ	ከተማ
አበበ	25	አዲስ አበባ
ሰላም	22	ሐዋሳ
ዳዊት	30	ባህር ዳር

<table>

ሰንጠረዡን ይጀምራል
Starts the table

<tr>

Table Row — አንድ ረድፍ
One horizontal row

<th>

Table Header — ርዕስ
Bold header cell

<td>

Table Data — ዋጋ
Regular data cell

📝

HTML Forms — ቅጽ // Form Tags

Form — ተጠቃሚ መረጃ ሲሞላ ይጠቅማል። Login page፣ Registration፣ Contact form ሁሉም <form> ይጠቀማሉ!
Forms let users input data — login, register, contact pages all use forms!

💡

English: The <form> tag creates an input form. Inside it, we use <input>, <label>, <button>, and <select> tags to collect user information.

form.html

<form>

  <!-- ስም -->
  <label>ስምዎን ያስገቡ:</label>
  <input type="text" placeholder="ለምሳሌ: አበበ">

  <!-- ኢሜይል -->
  <label>ኢሜይል:</label>
  <input type="email" placeholder="email@example.com">

  <!-- Password -->
  <label>የምስጢር ቃል:</label>
  <input type="password" placeholder="••••••••">

  <!-- Dropdown -->
  <label>ከተማ ይምረጡ:</label>
  <select>
    <option>አዲስ አበባ</option>
    <option>ሐዋሳ</option>
    <option>ባህር ዳር</option>
  </select>

  <!-- Message -->
  <label>መልዕክት:</label>
  <textarea rows="4" placeholder="እዚህ ይጻፉ..."></textarea>

  <!-- Submit Button -->
  <button type="submit">ላክ!</button>

</form>

👁️ Browser ላይ እንዲህ ይታያል — ሙሉት! (Interactive)
Live preview — you can actually fill this in!

ስምዎን ያስገቡ: ኢሜይል: የምስጢር ቃል: ከተማ ይምረጡ: መልዕክት:

⚡

Input Types — አይነቶች // type="..."

<input> tag የ type attribute ለውጦ ብዙ አይነት ሊሆን ይችላል:
The <input> tag changes behavior based on the type attribute:

type="text"

ተራ ጽሑፍ
Plain text

type="email"

ኢሜይል
Email address

type="password"

ምስጢር ቃል ****
Hidden text

type="number"

ቁጥር ብቻ
Numbers only

type="checkbox"

✅ ምልክት
Check/uncheck

type="radio"

◉ አንድ ይምረጥ
Select one option

type="date"

📅 ቀን ምረጥ
Date picker

type="file"

📁 ፋይል ምረጥ
File upload

📄

ሙሉ ምሳሌ // Full Combined Example

index.html — Table + Form

<!DOCTYPE html>
<html>
<head>
  <title>ተማሪዎች ዝርዝር</title>
  <style>
    body  { font-family: Arial; padding: 20px; background: #f8fafc; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
    th    { background: #7c3aed; color: white; padding: 10px; }
    td    { padding: 10px; border-bottom: 1px solid #e5e7eb; }
    input, select { width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid #d1d5db; border-radius: 6px; }
    button { background: #7c3aed; color: white; padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; }
  </style>
</head>
<body>

  <h1>ተማሪዎች ዝርዝር 📚</h1>

  <table>
    <tr><th>ስም</th><th>ዕድሜ</th><th>ከተማ</th></tr>
    <tr><td>አበበ</td><td>25</td><td>አዲስ አበባ</td></tr>
    <tr><td>ሰላም</td><td>22</td><td>ሐዋሳ</td></tr>
  </table>

  <h2>አዲስ ተማሪ ምዝገባ ✍️</h2>
  <form>
    <input type="text" placeholder="ስም">
    <input type="number" placeholder="ዕድሜ">
    <input type="email" placeholder="ኢሜይል">
    <button type="submit">ምዝገባ!</button>
  </form>

</body>
</html>

📌

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

1

📊 Table = <table> + <tr> + <th>/<td>

tr = ረድፍ፣ th = ርዕስ ዓምድ (bold)፣ td = ተራ ዓምድ
tr=row, th=header cell (bold), td=data cell

2

📝 Form = <form> + <input> + <button>

ተጠቃሚ መረጃ ለመሰብሰብ <form> ያስፈልጋል።
Use form tag to collect user information.

3

⚡ Input type ይቀይሩ!

type="text", "email", "password", "number", "date" ወዘተ
Change type attribute for different input behaviors.

4

🏷️ Label ያስቀምጡ!

ተጠቃሚ ምን ሊሞላ እንደሚፈልግ ለማሳወቅ label ያስፈልጋል።
Always add labels so users know what to fill in.

🎯

Quiz // ምን ተማርን?

❓ HTML Table ውስጥ አንድ ረድፍ (row) ለመስራት የትኛው tag ትጠቀማለህ?
Which tag creates a row in an HTML table?

A <td>

B <table>

C <tr>

D <th>

Tables እና Formsሰንጠረዥና ቅጽ

Tables እና Forms
ሰንጠረዥና ቅጽ