HTML

Part 6 – الروابط Hyperlinks – برمجة FSWD – HTML

ahmedمنذ أسبوع واحد

0 55 دقيقة واحدة

🔸 أولًا: إنشاء رابط باستخدام `<a>`

📌 تعريف:

الوسم <a> بيستخدم علشان تعمل رابط لأي صفحة أو موقع أو حتى جزء معين من نفس الصفحة.

✅ الشكل الأساسي:

<a href="الرابط">النص اللي هيظهر</a>

🔸 ثانيًا: السمات المهمة:

السمة	معناها
`href`	هو المكان اللي الرابط هيروح له
`target`	تحدد إذا الرابط يفتح في نفس الصفحة ولا في صفحة جديدة
`title`	نص يظهر لما توقف الماوس على الرابط (Tooltip)

مثال أساسي

<a href="https://www.google.com">اذهب إلى جوجل</a>

🔸 ثالثًا: استخدام `target="_blank"` علشان تفتح في نافذة جديدة:

<a href="https://www.google.com" target="_blank">افتح جوجل في صفحة جديدة</a>

🔸 رابعًا: إضافة `title` لرابط:

<a href="https://www.google.com" title="موقع البحث الشهير">جوجل</a>

🔸 خامسًا: الروابط الداخلية (Anchor Links)

📌 تعريف:

الرابط الداخلي هو اللي بيوديك لجزء معين جوا نفس الصفحة، باستخدام معرّف (id).

✅ خطواته:

لازم العنصر اللي عايز تروح له يكون ليه id
الرابط نفسه هيبقى: <a href="#id">

مثال كامل للرابط الداخلي

<h2><a href="#contact">اذهب إلى قسم التواصل</a></h2>

<!-- محتوى كتير هنا -->

<h3 id="contact">📞 قسم التواصل</h3>
<p>راسلنا على البريد الإلكتروني أو عبر الهاتف.</p>

✅ لما المستخدم يضغط على الرابط، هينزل مباشرة لعنصر فيه id="contact".

فيديو مثال كامل على كل أنواع الروابط

💡 ملخص سريع:

الوسم	المعنى
`<a>`	رابط (Anchor)
`href`	وجهة الرابط
`target="_blank"`	فتح الرابط في تبويب جديد
`title`	نص يظهر عند مرور الماوس
`#id`	رابط داخلي لعنصر له id