دروس في لغةhtml

درس التحكم فى الروابط التشعبية للنصوص فى لغة HTML – ما فائدة الروابط التشعبية – الدرس العاشر

فى هذا الدرس سوف نتعلم ان شاء الله ما هى فائدة الروابط التشعبية وكيف نقوم بانشائها
فوق النصوص
ما هى الروابط التشعبية

الروابط التشعبية هى بكل بساطة عبارة عن الباب الذى يمكنك من خلاله الانتقال من صفحة الى اخرى
ما فائدة الروابط التشعبية


الروابط التشعبية هى التى تمكن من الانتقال من صفحة الى اخرى بكل سهولة بواسطة الضغط على الرابط فقط وبواسطتها يمكنك ان تتعرف على الصفحات الموجوده فى الموقع فبدونها اذا دخلت على صفحة ما على اى موقع كيف لك ان تعرف ان هناك صفحات اخرى ؟
كيف يتم عمل الروابط التشعبية فى لغة HTML

يمكننا انشاء الروابط التشعبية فى لغة HTML بواسطة الوسم A
مثال على ذلك

1



<a href="http://2lex.info">مدونة اليكس</a>

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

العنصر A هو اختصار لـ anchor
و href هو اختصار لـ hypertext reference وهى المسئولة عن الى اين سيذهب الرابط
والعنصر href هو المسئول عن العنوان – رابط الوصلة URL
كيف تقوم بكتابة الروابط اذا كانت على موقع واحد او على جهازك

اذا كنت تقوم بانشاء عدة صفحات على موقعك او حتى فى ملف داخل جهازك وتريد ان تقوم بانشاء روابط بينهم لا يشترط ان تكتب الرابط كام ولكن يكفى ان تكتب اسم الصفحة
ولنفترض ان هناك صفحتين صفحة باسم page1.html وصفحة اخرى باسم page2.html
والاثنين فى نفس الملف ونحن الان فى صفحة page1.html فكيف سوف نكتب الرابط الى الصفحة page2.html
سنكتبه كالتالى

1



<a href="page2.html">الدخول الى page2</a>

طيب اذا كانت الصفحة page2.html موجودة بداخل ملف اسمه test موجود داخل الملف الموجود به الصفحة page1.html اى ان فى الملف الموجود به page1.html سيكون بجوارها الملف test ومن يدخل على test يجد page2.html
سيكتب الرابط بهذه الطريقة

1



<a href="test/page2.html">الدخول الى page2</a>

طيب ماذا لو قلنا انه العكس ان صفحة page1.html موجوده بداخل ملف موجود بداخل الملف الذى يوجد به صفحة page2.html
سوف يكتب الرابط بهذه الطريقة

1



<a href="../page2.html">الدخول الى page2</a>

حاول ان تجرب ما نقوم بعمله اول باول
الروابط الداخلية فى نفس الصفحة

كيف نكتب الرابط اذا اردنا ان نجعل هذا الرابط الى جزء ما فى الصفحة نفسها
ولنفترض اننا هنا فى هذه الصفحة يوجد فى اعلاها “ما هى الروابط التشعبية” ونريد ان نقوم بعمل رابط من يضغط عليه يذهب الى هذا العنوان
سنستخدم فى هذا العنصر ID وهو اختصار الى identification و العلامة #

1



<h1 id="التشعبية">ما هى الروابط التشعبية</h1>

هنا استخدما h1 يمكن طبعا تغييرها من h1 الى h6 كما تشاء او استخدام الوسم p او div
مثال

1



<p id="التشعبية">ما هى الروابط التشعبية</p>

او

1



<div id="التشعبية">ما هى الروابط التشعبية</div>

او يمكن الاشارة اليه باستخدام الوسم a مع الخاصية name
مثال

1



<a name="التشعبية">ما هى الروابط التشعبية</a>

وهنا قمنا باستخدام العنصر name بدلا من href للاشارة الى النص فقط

هذا الكود سوف نكتبه على “ما هى الروابط التشعبية” فى اعلى الصفحة لكى نقوم بعمل اشارة اليه وهنا جعلنا القيمة المشار اليها للذهاب الى “ما هى الروابط التشعبية” هى التشعبية

ثم نقوم بكتابة الرابط الى هذه الاشارة ويجب ان يكون الربط بنفس القيمة التى اضيفت فى العنصر id

1



<a href="#التشعبية">اضغط هنا للذهاب الى ما هى الروابط التشعبية</a>

جرب اضغط على الرابط التالى لترى النتيجة
اضغط هنا للذهاب الى ما هى الروابط التشعبية
سوف تجد انه تم نقلك الى اعلى حتى ترى “ما هى الروابط التشعبية”
كيفية اضافة رابط لبريد الكترونى – ايميل

يمكنك اضافة رابط لبريد الكترونى مثل الرابط العادى ولكن بدل ما بتضيف الرابط بتكتب mailto: ثم بتكتب البريد الالكترونى
وهذا مثال على ذلك

1



<a href="mailto:nobody@2lex.info">ارسل بريد الى nobody@2lex.info</a>

وسيكون بهذا الشكل

ارسل بريد الى nobody@2lex.info
كيفية اضافة عنوان لنص الرابط التشعبى عند الوقوف عليه بالفأرة

قبل ان نكتب عنوان للنص التشعبى يجب ان نعرف انه لكى نقوم بعمل نص تشعبى يجب من كتابة الوسم A والعنصر href هذه ثابته
الان كيف نضيف عنوان للنص التشعبى
يمكننا اضافة العنوان بواسطة العنصر title
ويكتب هكذا

1



<a href="http://2lex.info" title="الدخول الى الصفحة الرئيسية فى مدونة اليكس">مدونة اليكس</a>

هنا قمنا بكتابة الوصف
الدخول الى الصفحة الرئيسية الى مدونة اليكس
قف بالفأرة على النص التالى لترى بنفسك
مدونة اليكس
كيفية فتح الرابط فى صفحة اخرى

فى الامثلة السابقة اذا ضغط على الرابط يفتح فى نفس الصفحة
فماذا نفعل اذا اردنا ان فتح الرابط فى صفحة اخرى مع وجود الصفحة التى نحن بها
نستخدم العنصر target ونعطيه القيمة _blank
مثال
_blank لفتح الرابط فى صفحة اخرى

1



<a href="http://2lex.info" target="_blank">مدونة اليكس</a>

اضغط على الرابط التالى وانظر كيف فتح الرابط

مدونة اليكس

العنصر target يوجد معه قيم اخرى تقوم باعمال اخرى غير الفتح فى صفحة اخرى غير التى نحن بها
وهم

_self لفتح الرابط فى نفس الصفحة وهذا هو الافتراضى فى المتصفحات

1



<a href="http://2lex.info" target="_self">مدونة اليكس</a>

_parent لفتح النافذة فى الاطار الرئيسى

1



<a href="http://2lex.info" target="_parent">مدونة اليكس</a>

_top لفتح الرابط فى النافذة كاملة والغاء الاطارات

1



<a href="http://2lex.info" target="_top">مدونة اليكس</a>

ويوجد قيمة اخرى وهي يمكنك انت تحديدها كما تشاء وهى اسم الاطار

1



<a href="http://2lex.info" target="framname">مدونة اليكس</a>

كيف يمكننا اضافة رابط لا تتبعه عناكب محركات البحث لمنع ارشفته

اى رابط يتم كتابته يحمل الخاصية Dofollow وهذا ليتم ارشفته من محركات البحث
فماذا اذا كان لدينا رابط لا نريد محركات البحث ان تارشفة
نستخدم العنصر rel ونستخدم معه القيمة nofollow اى لا تتبع
بالشكل التالى

1



<a href="http://2lex.info" rel="nofollow">مدونة اليكس</a>

كيف نقوم بتحديد لغة الصفحة التى نجعلها رابط

يمكننا فعل هذا باستخدام العنصر hreflang واعطائة القيمة باللغه مثال

1



<a href="http://2lex.info" hreflang ="ar">مدونة اليكس</a>

هنا اعطيناه القيمة ar اى عربى

وبهذا نكون قد انتهينا من هذا الدرس بحمد الله وباقى ان نشرح كيفية اضافة النص على الصورة وكيفية اضافة اكثر من نص على صورة واحده وهذا سوف نشرحه ان شاء الله بعد ان نشرح فى الدرس القادم كيفية اضافة صورة فى صفحة HTML وكيفية التحكم بها