في هذا الدرس 4تصفّح المواضيع
HTML Links
الروابط في لغة HTML
HTML Links الروابط في لغة HTML
الروابط links في HTML، المعروفة أيضًا بالـ [hyperlinks]، هي كلمات أو أزرار تربط المستخدم بصفحات أخرى، سواء كانت داخل الموقع نفسه أو خارجه. يُستخدم العنصر <a>، حيث يرمز الحرف [a] إلى [anchor] والتي تعني [مرساة]، لربط النصوص أو العناصر المختلفة في الصفحة بصفحات ويب أخرى. تُعتبر الروابط جزءًا أساسيًا من تصميم مواقع الويب الحديثة، حيث تسهل التنقل وتمكن المستخدمين من الوصول للمعلومات الإضافية بسهولة وفعالية.
في الحياة اليومية للمستخدمين، مثلًا على Facebook، يمكن النقر على اسم أو صورة الصديق للانتقال إلى صفحته الشخصية. الروابط ليست مقتصرة على النصوص فقط، بل يمكن أن تحتوي صورًا أو عناصر مسموحة في سياقها. لا تضع داخل الرابط رابطًا آخر أو عناصر تفاعلية مثل زر أو حقل إدخال، مما يعزز من تجربة التصفح ويساعد في بناء وتنظيم هيكل الموقع بشكل فعّال وسلس.
تُستخدم الروابط للتنقل من صفحة HTML الحالية إلى:
- صفحات HTML أخرى، سواء كانت صفحات داخلية ضمن موقع الويب نفسه أو صفحات خارجية من مواقع ويب أخرى.
- عناصر أخرى داخل نفس الصفحة، مثل الصور أو النصوص.
HTML Link Syntax
طريقة كتابة link في لغة HTML
HTML Link Syntax طريقة كتابة link في لغة HTML
- علامة فتح العنصر: <a>.
- وجهة الرابط: الموجودة داخل السمة [href].
- نص الرابط: النص الذي يظهر للمستخدم للضغط عليه [Link Text].
- علامة إغلاق العنصر: </a>.
النصوص والعناصر المسموح بها داخل <a> تصبح محتوى الرابط عند وجود href؛ لا يجوز تعشيق روابط أو عناصر تفاعلية داخله. عند كتابة العنصر <a> فقط، لن يقوم المتصفح بفتح أي صفحة HTML أخرى عند الضغط على الرابط، لأننا لم نحدد الرابط بعد. لإجراء ذلك، نحتاج لإضافة سمة [href] إضافية لهذا العنصر، والتي ستتعرف عليها في هذا الدرس.
الصورة تشرح الأجزاء، لكنها ترسم علامات اقتباس منحنية؛ في الكود اكتب علامات ASCII المستقيمة " أو '.
Link Syntax
طريقة كتابة عنصر <a> لإنشاء رابط link .
<a>link text</a>
Href Attribute With Links In HTML
سمة Href مع الروابط في لغة HTML
Href Attribute With Links In HTML سمة Href مع الروابط في لغة HTML
تعتبر سمة [href] الأهم لعنصر <a>، فهي تشير إلى عنوان الرابط أو العنصر المقصود الذهاب إليه داخل صفحة HTML.
يجب أن تحتوي علامة الفتح <a> على سمة [href] لنضع بداخلها قيمة value تحدد وظيفة الرابط، مثل:
- [internal link] رابط صفحة HTML داخلي.
- [external link] رابط صفحة HTML خارجي.
- [sections of a page] عنوان جزء من الصفحة.
- [media files] أجزاء من ملفات الوسائط، مثل: الفيديوهات، والصوتيات.
- [telephone numbers] أرقام الهواتف.
- [email addresses] عناوين البريد الإلكتروني.
- [sms numbers] إرسال الرسائل.
Syntax href Attribute and Link Text
طريقة كتابة سمة [href] مع نص الرابط [Link Text] داخل عنصر <a>.
<a href="value">Visit closetag.com</a>
Absolute and Relative URLs in HTML
الروابط المطلقة والنسبية في HTML
Absolute and Relative URLs in HTML الروابط المطلقة والنسبية في HTML
- الروابط النسبية relative URLs: يحلها المتصفح بالاعتماد على عنوان الأساس. قد تشير إلى ملف مجاور أو مجلد آخر، وليست مقصورة على الملفات المجاورة.
مثال: إذا كنت تنشئ الرابط داخل صفحة اسمها index.html والنص مربوط بصفحة أخرى contact.html بجوار صفحة HTML، فهذا يعتبر رابطًا داخليًا.
- الروابط المطلقة absolute URLs: تتضمن المخطط مثل https وعنوان الوجهة كاملًا، ويمكن أن تشير إلى الموقع نفسه أو إلى موقع آخر.
مثال: إذا كان الرابط داخل صفحة اسمها index.html والنص مربوط بصفحة خارجية من موقع مثل google.com، فهذا يُعتبر رابطًا خارجيًا ليس له علاقة بالصفحة الأولى.
مثال contact.html يفترض وجود ملف بهذا الاسم بجوار الصفحة الأساسية؛ إنشاء الرابط لا ينشئ الملف.
HTML Relative Links
مثال توضيحي لاستخدام الروابط النسبية [Relative Links] داخل صفحة HTML.
HTML Absolute Links
مثال توضيحي لاستخدام الروابط المطلقة [absolute URLs] داخل صفحة HTML.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات16
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Links روابط HTML
- للمراجعة
- 02 Links روابط
- للمراجعة
- 03 Hand يد أو كف
- للمراجعة
- 04 Nested متداخلة
- للمراجعة
- 05 Tag Name إسم العلامة
- للمراجعة
- 06 Attribute سمة
- للمراجعة
- 07 Style نمط أو شكل
- للمراجعة
- 08 Unvisited Link رابط لم تتم زيارته
- للمراجعة
- 09 Visited Link رابط تمت زيارته
- للمراجعة
- 10 Active Link رابط نشط أو مفعل
- للمراجعة
- 11 Target Attribute سمة الهدف
- للمراجعة
- 12 Self_ تعني فتح الرابط في نفس الصفحة
- للمراجعة
- 13 blank_ تعني فتح الرابط في صفحة جديدة
- للمراجعة
- 14 Title Attribute سمة العنوان
- للمراجعة
- 15 Value قيمة
- للمراجعة
- 16 Mail To بريد إليكتروني إلي..
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Href Href
- Hypertext Reference
- مرجع النص التشعبي
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- صفحات التنسيق المتتالية<p><a href="https://www.closetag.com/tutorial/css/css-introduction">المزيد عن CSS</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي4 أسئلة تنتظرك ＋
ما هو اسم ال attribute الذي يتم وضع رابط بدخله في عنصر <a> ؟
ماهو ال attribute الذي يستخدم في ما اذا كان سوف يتم فتح الرابط في نفس الصفحة او صفحات اخري ؟
اي من ال attributes التالية يستخدم في اضافة نص يظهر عند الوقوف بالمؤشر علي الرابط ؟
استخدم عنوان البريد الالكتروني التالي "[email protected]" لأنشاء رابط بريد الكتروني يتم فتحه عند الضغط علي كلمة "mymail"
____