الروابط النصية (Text Links) في HTML



8 نوفمبر، 2021 | تيتو 4 تك


  • يمكن أن تحتوي صفحة الويب على روابط مختلفة تنقلك مباشرةً إلى صفحات أخرى وحتى إلى أجزاء معينة من صفحة معينة. تُعرف هذه الروابط بالارتباطات التشعبية.

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

    ملاحظة - أوصيك بالاطلاع على المقال الخاص بفهم عنوان URL

     

    yes  ربط المستندات (Linking)

     

    يتم تحديد ارتباط باستخدام علامة HTML <a>. تسمى هذه العلامة علامة الارتساء وأي شيء يقع بين علامة <a> الافتتاح وعلامة الإغلاق </a> يصبح جزءًا من الرابط ويمكن للمستخدم النقر فوق هذا الجزء للوصول إلى المستند المرتبط. فيما يلي بناء الجملة البسيط لاستخدام <a> العلامة.

     

    <a href = "Document URL" ... attributes-list>Link Text</a> 
    

     

    مثال
    لنجرب المثال التالي الذي يربط https://tito4tech.com/  بصفحتك هذه :

     

    <!DOCTYPE html>
    <html>
       
       <head>
          <title> مثال علي الرابط التشعبي </title>
       </head>
    	
       <body>
          <p> إضغط هنا </p>
          <a href = "https://tito4tech.com/" target = "_self">تيتو 4 تك</a>
       </body>
    	
    </html>

     

     

    سيؤدي هذا إلى النتيجة التالية ، حيث يمكنك النقر فوق الارتباط الذي تم إنشاؤه للوصول إلى الصفحة الرئيسية لـ تيتو 4 تك (في هذا المثال):

     

    إضغط هنا

    تيتو 4 تك

     

    yes  سمة الهدف (target) 

     

    لقد استخدمنا سمة الهدف في مثالنا السابق. تُستخدم هذه السمة لتحديد مكان فتح المستند المرتبط. فيما يلي الخيارات الممكنة :

     

     

    الاختيار

     

    الوصف

    _blank

     

    يفتح المستند المرتبط في نافذة أو علامة تبويب جديدة

     

    _self

     

    يفتح المستند المرتبط في نفس الإطار

     

    _parent

     

    يفتح المستند المرتبط في الإطار الأصلي

     

    _top

     

    يفتح المستند المرتبط في أعلي الإطار

     

    targetframe

     

    يفتح المستند المرتبط في إطار هدف مسمى

     

     

    مثال
    جرب المثال التالي لفهم الاختلاف الأساسي في بعض الخيارات المعطاة لسمة الهدف

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي الرابط التشعبي </title>
       </head>
    	
       <body>
          <p> إضغط علي أي من الروابط التالية </p>
          <a href = "https://tito4tech.com/" target = "_blank">Opens in New</a> |
          <a href = "https://tito4tech.com/" target = "_self">Opens in Self</a> |
          <a href = "https://tito4tech.com/" target = "_parent">Opens in Parent</a> |
          <a href = "https://tito4tech.com/" target = "_top">Opens in Body</a>
       </body>
    
    </html>

     

    سينتج عن ذلك النتيجة التالية ، حيث يمكنك النقر فوق روابط مختلفة لفهم الفرق بين الخيارات المختلفة المعطاة لسمة الهدف.

     

    إضغط علي أي من الروابط التالية

    Opens in New | Opens in Self | Opens in Parent | Opens in Body

     

     

    enlightened  ضبط ألوان الروابط

     

    يمكنك تعيين ألوان الروابط والروابط النشطة والروابط التي تمت زيارتها باستخدام link و alink  و vlink لعلامة <body>.

    مثال
    احفظ ما يلي في test.html وافتحه في أي متصفح ويب لترى كيف تعمل.

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي الرابط التشعبي </title>
       </head>
    
       <body alink = "yellow" link = "blue" vlink = "black">
          <p> إضغط علي الرابط هذا </p>
          <a href = "https://tito4tech.com/" target = "_blank" >تيتو 4 تك</a>
       </body>
    
    </html>
    
     

     

    سيؤدي هذا إلى النتيجة التالية. ما عليك سوى التحقق من لون الرابط قبل النقر فوقه ، ثم تحقق من لونه عند تنشيطه وعند زيارة الرابط.

     

    إضغط علي الرابط هذا

    تيتو 4 تك

     

     

    enlightened  روابط التحميل

     

    يمكنك إنشاء رابط نصي لجعل ملفات PDF أو DOC أو ZIP قابلة للتنزيل. هذا بسيط جدا. ما عليك سوى تقديم عنوان URL الكامل للملف القابل للتنزيل على النحو التالي :

     

    <!DOCTYPE html>
    <html>
    
       <head>
          <title> مثال علي الرابط التشعبي </title>
       </head>
    	
       <body>
          <a href = "https://tito4tech.com/media/software/iobit-uninstaller-11-0-1-16.exe">تحميل برنامج ايوبيت انستلر</a>
       </body>
    	
    </html>

     

    سينتج هذا الارتباط التالي وسيتم استخدامه لتنزيل ملف :