√ تعلم كل شيء حول روابط HTML

تعلم كل شيء حول روابط HTML

6/17/2014

1 - ما هي روابط الhtml أو Hyperlinks:

روابط html

روابط الhtml هي كلمة، مجموعة كلمات، أو صور عندما ننقر عليها يتم فتح صفحة أخرى أو ملف. ولمعرفة بوجود رابط أم لا، يكفي المرور بفأرة الحاسوب من فوقه ليتحول السهم غلى يد صغيرة إذا كان الأمر يتعلق برابط. ودور الروابط يتجلى في التنقل بين محتويات موقع ما عبر صالفحات أو الربط بين المواقع فيما بينها.
لنقم بتجربة ذلك:

هذا رابط هذا ليس برابط

كل الروابط تبدأ بوسم <a وأهم عناصر روابط الhtml هو href لأنه يحدد وجهة الرابط، أي الصفحة أو الملف الذي سيسمح بفتحه أو التنقل إليه.

2- تركيب رابط html مع المثال:

** التركيبة أو العناصر المكونة لرابطhtml:

الكود أو التركيبة الخاصة برابط html هي كالتالي:

<a href="عنوان url ">نص الرابط</a>

يبدأ ب <a وينتهي ب </a>. المكون href هو الذي يحتوي الرابط وهو أهم العناصر كما قلنا سابقا. ثم نص الرابط الذي يظهر على المتصفح ليتم النقر عليه.

** المثال:

هذاالكود سيعطينا النتيجة التالية كرابط مدونة فلفلاي <a href="https://www.folfoly.com/ ">مدونة فلفلاي</a>

+ الرابط ليس بالضرورة أن يكون دائما نصا. بل يمكن استعمال صورة كرابط كذلك.

4- عنصر terget الموجه لروابط html :

عنصر terget يسمح بالتحكم بوجهة الرابط وطريقة فتحه. بحيث يمكن فتح الرابط على نافذة جديدة عوض نفس الصفحة التي يتواجد عليها:

<a href="https://www.folfoly.com/ " target="_blank">مدونة فلفلاي</a>

قمنا بإضافة target ليتم فتح الرابط في نافذة جديدة.
لنجرب الأمر: رابط يفتح على نافذة جديدة رابط يفتح على نفس الصفحة

! هام:

لا تنسى إضافة رمز السلاش / في نهاية الروابط، لأنك عندما لا تفعل ذلك فالخادم يقوم بمهمتين: البحث عن الرابط ثم إضافة السلاش. وهذا الأمر يثقل من سرعة موقعك أو مدونتك.

هذا كل ما يتعلق بروابط html كبداية، سنحاول في دروس قادمة تناول طريقة استعمال صورة كرابط ومزايا أخرى تهم الروابط وكيفية جعلها صديقة سيو SEO والتحكم فيها بشكل كامل.