HTML ትምህርት - ክፍል 1

🌐

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

HTML ማለት HyperText Markup Language ማለት ነው። HTML የ Web page ዋና መሰረት ነው — browser ላይ ምን ይታይ እንደሚፈልግ የምንነግርበት ቋንቋ ነው።

💡

English: HTML stands for HyperText Markup Language. It is the standard language used to create web pages. Every website you see on the internet is built with HTML.

🏠 ቤት እንደመስራት አስቡት: HTML የቤቱ አጥንት (structure) ነው — ግድግዳ፣ ጣሪያ፣ ወለል። CSS ደግሞ ቤቱን ቀለም ማሳመር ሲሆን JavaScript ሃይል/ውሃ ማስገባት ነው።

🏠 Think of it like building a house: HTML is the skeleton/structure, CSS is the paint and decoration, JavaScript is the electricity and plumbing.

🏗️

የ HTML መሰረታዊ አወቃቀር // Basic Structure

እያንዳንዱ HTML ፋይል ይህን ቅርጽ ይከተላል:
Every HTML file follows this structure:

index.html

<!-- ይህ HTML document መሆኑን ለ browser ይነግረዋል -->
<!DOCTYPE html>

<html lang="am">

  <!-- HEAD: ሰው የማይታይ መረጃ (title, CSS, etc.) -->
  <head>
    <meta charset="UTF-8">
    <title>የ Page ስም</title>
  </head>

  <!-- BODY: Browser ላይ የሚታይ ሁሉ ነገር -->
  <body>
    <h1>ሰላም! Hello World!</h1>
    <p>ይህ የመጀመሪያ HTML ገጼ ነው።</p>
  </body>

</html>

1

<!DOCTYPE html>

ይህ HTML5 document መሆኑን ለ browser ይነግራል። Tells the browser this is an HTML5 document.

2

<html>

ሁሉም HTML ኮድ ውስጥ ይቀመጣል። Root element ነው። Everything goes inside this tag. It's the root element.

3

<head>

Title, CSS, font ወዘተ የሚቀመጥበት። ሰው page ላይ አያየውም። Contains meta info, title, CSS links — not visible on page.

4

<body>

ሁሉም የሚታይ ነገር — text, image, button ወዘተ። All visible content goes here — text, images, buttons, etc.

🏷️

አስፈላጊ Tags // Important Tags

HTML Tags ምን ምን አሉ? አንዳንዶቹን እናያለን:
Here are some important HTML tags to know:

Headings (ርዕሶች)
h1 ትልቁ፣ h6 ትንሹ

<p>

Paragraph (አንቀጽ)
ጽሑፍ ለመጻፍ

<a>

Link (ሊንክ)
ሌላ page ለማስገናኘት

<img>

Image (ፎቶ)
ምስል ለማስቀመጥ

<div>

Container (ሳጥን)
ነገሮችን ለመሰብሰብ

List (ዝርዝር)
የ bullet list ለማሳየት

Button (ቁልፍ)
click ሊደረግ ለሚችል ቁልፍ

<input>

Input (ሙላ)
ተጠቃሚ ጽሑፍ ሲያስገባ

example.html

<h1>ሰላም ኢትዮጵያ! 🇪🇹</h1>
<h2>HTML ትምህርት ክፍል 1</h2>

<p>ይህ የ HTML ትምህርት ነው።</p>

<a href="https://t.me/EthioCodeSoftSelect">
  ቻናሉን ጎብኙ!
</a>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

💻

እንዴት እንሞክር? // How to Practice?

አሁኑኑ HTML ለመጻፍ እነዚህን ይሞክሩ:
Try these ways to write HTML right now:

1

🌐 Online — VS Code for Web

Browser ብቻ ይበቃል → vscode.dev ይክፈቱ፣ index.html ፍጠሩ።
Open vscode.dev in browser, create index.html

2

📱 Mobile — Spck Editor

Phone ላይ Play Store → "Spck Code Editor" ይጫኑ።
Install "Spck Code Editor" from Play Store on Android.

3

🖥️ Computer — VS Code

code.visualstudio.com → Download → index.html → Browser ላይ ክፈቱ።
Download VS Code, create index.html, open in browser.

🎯

Quiz — ምን ተማርን? // What did we learn?

❓ የ HTML ዋና "body" content (browser ላይ የሚታይ ነገር) የሚቀመጠው በምን tag ውስጥ ነው?
Where does all visible content go in HTML?

A <head>

B <body>

C <html>

D <div>

HTML ምንድን ነው?What is HTML?

HTML ምንድን ነው?
What is HTML?