HTML ትምህርት - ክፍል 3

🔗

HTML Links — <a> tag // Anchor Tag

<a> tag (anchor) ሌላ page ወይም website ለማስገናኘት ይጠቅማል። "href" attribute የሚሄደውን አድራሻ ይይዛል።

💡

English: The <a> tag creates hyperlinks. The href attribute holds the URL (web address) you want to link to. Users click on it to navigate.

links.html

<!-- መሰረታዊ link -->
<a href="https://t.me/EthioCodeSoftSelect">
  ቻናሉን ጎብኙ!
</a>

<!-- አዲስ tab ላይ ለመክፈት target="_blank" -->
<a href="https://google.com" target="_blank">
  Google ክፈት
</a>

<!-- ኢሜይል link -->
<a href="mailto:info@example.com">
  ኢሜይል ላክ
</a>

<!-- ስልክ link -->
<a href="tel:+251911000000">
  ደውል!
</a>

የ <a> tag አስፈላጊ Attributes:
Important attributes of the <a> tag:

Attribute	ምን ያደርጋል?	ምሳሌ
href	የሚሄደው አድራሻ — Destination URL	href="https://..."
target	እንዴት ይከፈት — How to open	target="_blank"
title	Hover ሲደረግ ይታያል — Tooltip on hover	title="ጎብኙ"

🖼️

HTML Images — <img> tag // Image Tag

<img> tag ምስል ለማሳየት ይጠቅማል። ይህ tag self-closing ነው — መዝጊያ tag (</img>) አያስፈልገውም!

💡

English: The <img> tag embeds images. It's self-closing (no closing tag needed). The src attribute tells the browser where the image is, and alt provides a text description.

images.html

<!-- መሰረታዊ image -->
<img src="ፎቶ.jpg" alt="የ ፎቶ መግለጫ">

<!-- Internet ፎቶ (URL) -->
<img
  src="https://example.com/photo.jpg"
  alt="Online photo"
  width="300"
  height="200"
>

<!-- CSS ጋር ደምሮ -->
<img
  src="logo.png"
  alt="Logo"
  style="width: 100%; border-radius: 12px;"
>

የ <img> tag አስፈላጊ Attributes:

Attribute	ምን ያደርጋል?	አስፈላጊነት
src	የ ፎቶ አድራሻ — Image source/path	አስፈላጊ ✱
alt	ፎቶ ካልጫነ ይታያል — Alternative text	አስፈላጊ ✱
width	ስፋት (px ወይም %) — Image width	አማራጭ
height	ቁመት — Image height	አማራጭ

⚡

Link + Image አብሮ // Clickable Image

ፎቶ ላይ ጠቅ ሲደረግ ሌላ page ለመክፈት — <a> ውስጥ <img> ያስቀምጡ!
To make an image clickable, wrap <img> inside an <a> tag!

clickable-image.html

<!-- ፎቶ ጠቅ ሲደረግ Telegram ይከፍታል -->
<a href="https://t.me/EthioCodeSoftSelect"
   target="_blank">
  <img
    src="banner.jpg"
    alt="EthioCode Channel"
    style="width: 100%; border-radius: 8px;"
  >
</a>

📄

ሙሉ ምሳሌ // Full Example

index.html — ሙሉ ምሳሌ

<!DOCTYPE html>
<html>
<head>
  <title>EthioCode Page</title>
  <style>
    body { font-family: Arial; padding: 20px; background: #f8fafc; }
    img  { width: 100%; max-width: 400px; border-radius: 12px; }
    a   { color: #06d6a0; font-weight: bold; }
  </style>
</head>
<body>

  <h1>ሰላም! 🇪🇹</h1>

  <!-- ፎቶ -->
  <img src="ethiopia.jpg" alt="Ethiopia">

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

  <!-- Links -->
  <p>
    <a href="https://t.me/EthioCodeSoftSelect"
       target="_blank">
      ✈ Telegram Channel
    </a>
  </p>

</body>
</html>

📌

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

1

🔗 <a href="..."> — Link ለመስራት

href ውስጥ URL ያስቀምጡ። target="_blank" አዲስ tab ይከፍታል።
Put URL in href. Use target="_blank" to open in new tab.

2

🖼️ <img src="..." alt="..."> — ፎቶ ለማሳየት

src = ፎቶ አድራሻ፣ alt = ፎቶ ካልጫነ የሚታይ ጽሑፍ።
src = image path/URL, alt = text shown if image fails to load.

3

⚡ <a> ውስጥ <img> — Clickable ፎቶ

ፎቶ ጠቅ ሲደረግ link ሊሄድ ይችላል።
Wrap img inside a tag to make the image clickable.

4

📁 Local vs Online ፎቶ

Local: src="photo.jpg" (ፋይሉ ከ HTML ጋር ይሁን)
Online: src="https://..."
Local: file next to HTML. Online: full URL.

🎯

Quiz // ምን ተማርን?

❓ ፎቶ ጠቅ ሲደረግ ሌላ website ለመክፈት ምን ትጽፋለህ?
To make an image clickable (link to another page), what do you do?

A <img href="..."> attribute ይጨምሩ

B <img> ን <a> ውስጥ ያስቀምጡ

C <link> tag ይጠቀሙ

D <img click="..."> attribute ይጨምሩ

Links እና Imagesሊንክና ፎቶ

Links እና Images
ሊንክና ፎቶ