إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الروابط

    مفهوم الرابط

    الرابط ( Link ) في العادة عبارة عن نص يشير لعنوان صفحة أخرى عند النقر عليه يقوم المتصفح بنقلك إليها.
    أيضاً, قد يكون الرابط يشير لملف أو برنامج ما عند النقر عليه يقوم المتصفح بسؤالك ما إن كنت تريد تحميله أم لا.


    أشكال الروابط

    • يمكن وضع الرابط كنص ( Text Link ) عند النقر عليه يتم توجيهك لصفحة أخرى أو تحميل ملف ما.
    • يمكن وضع الرابط كزر ( Button Link ) عند النقر عليه يتم توجيهك لصفحة أخرى أو تحميل ملف ما.
    • يمكن وضع الرابط كصورة ( Image Link ) عند النقر عليها يتم توجيهك لصفحة أخرى أو تحميل ملف ما.

    إضافة رابط في الصفحة

    بشكل عام نستخدم الوسم <a> على هذا النحو <a href="url">text</a> لعرض رابط في الصفحة.

    • مكان الكلمة text نضع النص الذي نريده أن يظهر في الصفحة و الذي يمكن النقر عليه.
    • مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على النص الذي يظهر في الصفحة.

    في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

    مثال

    <p><a href="https://harmash.com">Go to harmash.com</a></p>
    		

    جرب الكود

    إظهار تلميح عند تمرير الماوس فوق الرابط

    في حال أردت إظهار تلميح عند تمرير الماوس فوق الرابط فيمكنك إضافة الخاصية title في الوسم <a> و تمرير التلميح الذي تريد عرضه كقيمة لها.


    في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه.

    مثال

    <p><a href="https://harmash.com" title="Go to harmash.com">harmash</a> teaches you every thing you need.</p>
    		

    جرب الكود

    وضع رابط لبريد إلكتروني محدد

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


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

    مثال

    <p><a href="mailto:someone@example.com">Send Email</a></p>
    		

    جرب الكود

    روابط لعناصر محددة في الصفحة

    في حال أردت وضع رابط يوجه المستخدم لعنصر محدد موجود في نفس الصفحة أو لعنصر محدد موجود في صفحة أخرى يمكنك إعطاء العنصر id و عندها الرابط الذي نريده أن يوجه المستخدم لذاك العنصر يجب أن نضع في نهايته الرمز # يليه id العنصر.


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

    المثال الأول

    <a href="#P5">Jump to Paragraph 5</a>
    		

    جرب الكود



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

    المثال الثاني

    <a href="sample.html#P5">Go to sample.html then jump to Paragraph 5</a>
    		

    جرب الكود


    إضافة رابط وهمي

    أثناء تصميم الصفحة, المصمم لا يحتاج أن يحدد قيمة الخاصية href لكل رابط موضوع في الصفحة.
    في العادة حتى يظهر نص الرابط كأنه رابط عادي يمكن النقر عليه يمكنك ببساطة وضع الرمز # كقيمة للخاصية href و عندها كأنك تقول للمتصفح قم بتوجيه المستخدم إلى لا شيء.


    في المثال التالي قمنا بإضافة رابطين, الأول يظهر كرابط عادي و لكن عند النقر عليه لا يحدث أي شيء و الثاني لا يظهر من الأساس كرابط.

    مثال

    <a href="#">Go to harmash.com</a>
    <a>Go to harmash.com</a>
    		

    جرب الكود

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

    إفتراضياً, عند النقر على رابط موجود في الصفحة نجد أنه يتم فتح الصفحة الجديدة مكان الصفحة الحالية كما لاحظنا في المثال السابق.

    في حال أردت تحديد أين سيتم فتح الرابط يجب أن تضيف الخاصية target في الوسم <a> و إعطائها إحدى القيم التالية:

    • _self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).
    • _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.
    • _top في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.
    • _parent في حال أردت أن يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.


    ملاحظة

    شيء طبيعي جداً أن لا تكون قد فهمت أي شيء قلناه عن ما تفعله القيمة _top و القيمة _parent في حال تم وضعهما كقيمة للخاصية target لأنك لم تقم حتى الآن بتعريف صفحة تقوم بعرض صفحة أخرى بداخلها.

    قد لا تحتاج إلى استخدام القيمتين _top و _parent طوال حياتك و لكن في حال احتجتهما يوماً فإنك ستكون حينها قد علمت سبب الحاجة لهما و ما معنى عرض صفحة بداخل صفحة. لذا الآن لا تتعب نفسك بمحاولة معرفة الفارق بينهما.


    في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

    مثال

    <p><a href="https://harmash.com" target="_self">Open harmash.com in the current window (iframe)</a></p>
    <p><a href="https://harmash.com">Open harmash.com in a new tab</a></p>
    <p><a href="https://harmash.com" target="_top">Open harmash.com in the full window</a></p>
    <p><a href="https://harmash.com" target="_parent">Open harmash.com in the parent window (parent iframe)</a></p>
    		

    جرب الكود

    إضافة رابط كزر

    في حال أردت وضع الرابط كزر بدل وضعه كنص, يمكنك وضعه بواسطة الوسم <button> على هذا النحو <button onlclick="document.location='url'">text</button>.

    • مكان الكلمة text نضع النص الذي نريده أن يظهر على الزر.
    • مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على الزر.

    في المثال التالي قمنا بإضافة رابط كزر عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

    مثال

    <button onclick="document.location='https://harmash.com'">Go to harmash.com</button>
    		

    جرب الكود

    إضافة رابط كصورة

    في حال أردت وضع الرابط كصورة بدل وضعه كنص, يمكنك وضعه رابط عادي بواسطة الوسم <a> و بداخله تقوم بوضع الصورة التي تريد فتج الرابط عند النقر عليها.

    ستتعلم كيفية التعامل مع الصور في درس خاص و لكن الآن عليك معرفة أنه لوضع صورة نستخدم الوسم <img> على هذا النحو <img src="image_url"/>.
    مكان الكلمة image_url نضع رابط الصورة التي سيتم عرضها.


    في المثال التالي قمنا بإضافة صورة عند النقر عليها يتم توجيه المستخدم للصفحة الأولى في دورة HTML.

    مثال

    <a href="https://harmash.com/tutorials/html"><img src="/tutorials/html/links/html-5-icon.png"></a>
    		

    جرب الكود

    تعامل المتصفح مع محتوى الروابط

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


    1- روابط صفحات ويب

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


    2- روابط صور

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


    3- روابط ملفات نصية

    إذا وجد المتصفح أن الرابط هو رابط لملف نصي إمتداده .txt أو .css أو .js أو أي نوع آخر من الملفات النصية فإنه يعرض لك النص الموجود فيه كما هو.
    مثال: عند النقر على هذا الرابط سيتم عرض محتوى ملف جافاسكريبت بجانب الصفحة الحالية.


    4- روابط ملفات غير نصية

    إذا وجد المتصفح أن الرابط هو لبرنامج أو لملف لم يستطع التعرف على نوعه, فإنه لن يتمكن من عرضه في الصفحة و لذلك سيسألك ما إن كنت تريد تحميله.
    مثال: عند النقر على هذا الرابط سيقوم المتصفح بفتح صفحة فارغة بجانب الصفحة الحالية سيسألك ما إن كنت تريد تحميل ملف مضغوط إسمه harmash-log.zip أم لا.

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب