HTML : استخدام العناصر ( Links – Images )
قد يتبادر لذهنك أحيانا تساؤلات في غاية الأهميّة؛ مثل : كيف أقوم بوضع روابط لصفحات أخرى وقد يدور بذهنك أيضًا تساؤل آخر ماذا لو أردت إضافة صورة ضمن الصفحة كيف يُمكن ذلك ؟، ليس هذا فحسب فقد تأتيك فكرة أيضًا كيف تجعل الصورة عبارة عن رابط للتنقل؟ .. سنُجيب على هذه التساؤلات بشكلٍ مبسط وسهل بتلخيص كل سؤال في نقطة منفصلة.
استخدام الروابط ( Links )
في استخداماتك للروابط في HTML فإنك ستحتاج إلى الوسم </a></a> من أجل صناعة روابط خارجية أو داخلية ضمن صفحتك كيف ذلك ؟
مثال مُصغر
<a href="https://mokfie.sa/abjjadev"></a>
في الكود السابق نحن قمنا بوضع رابط موقع وقمنا بتسمية الرابط بإسم ( ) حيثُ أنّ هذا الاسم هو الظاهر أثناء معاينة الصفحة وعند النقر عليه يتمّ فتح الرابط المُضمّن به.
الخصائص المرتبطة بالوسم </a></a>
إليك جدول العناصر والخصائص الشائع استخدامًا ضمن وسم </a></a> :
| الخاصية | النوع | مثال | الوصف |
| title | نص | <a title="البيئة التطويرية الفريدة من نوعها !" href="https://mokfie.sa/abjjadev"><a> |
يُمكنك استخدام الخاصية title .لوضع عنوان أو تسمية بمرور الماوس على الرابط |
| download | اسم الملف | <a href="https://mokfie.sa/abjjadev/abjjadev.jpg" download></a> |
تستخدم هذه الخاصية ضمن الوسم لتحميل صورة أو ملف مرتبط بالوسم بشكل تلقائي. |
| href | الرابط الهدف | <a href="https://mokfie.sa/abjjadev/insta">موقع </a> |
تستخدم هذه الخاصية من أجل تحديد الرابط الهدف بعد النقر عليه. |
| rel | نوع العلاقة alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
<a rel="nofollow" href="https://mokfie.sa/abjjadev/"><a> |
تستخدم هذه الخاصية لتحديد العلاقة ما بين الرابط الهدف والصفحة الحالية. |
| target | طريقة فتح الإطار _blank _parent _self _top |
<a target="_blank" href="https://mokfie.sa/abjjadev/"><a> |
تستخدم هذه الخاصية لتحديد أسلوب الإطار الممكن فتحه بعد النقر على الرابط. |
استخدام الصور ( Images )
ترابطًا بإستخدام الروابط لابد وأنّك تريد إرفاق صور تملكها ضمن صفحتك الشخصية أو صفحاتك الأخرى عبر دمج وسم </a></a>، فلنبدأ أولاً بالتعرف على كيفية إدراج الصور إلى الصفحة الخاصة بك.
مثال مُصغر
<img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt="">
في الصورة العامة السابقة يظهر لنا نموذج آخر من الوسوم الجديدة وهو وسم <img> حيث أنّه لا يتحوي على وسم إغلاق!، بالفعل هناك بعض العناصر في لغة HTML لا تحتوي على وسم إغلاق ولكنّها تُغلق بإستخدام / قبل نهاية إغلاق الوسم الرئيسي على سبيل المثال :
<img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt="" />
ويُضاف إلى ذلك أنّ وسم <img> يحتوي على خصائص متعددة تساهم في استيراد صورة متكاملة التفاصيل بإستخدام الخصائص المضمّنة برمجيًا ضمن هذا الوسم.
الخصائص المرتبطة بالوسم <img>
وسم <img> يحتوي على خصائص تُتيح لك استيراد صورة مكتملة التفاصيل فإليك الجدول التالي :
| الخاصية | مثال | الوصف |
| src | <img src="https://mokfie.sa/abjjadev/abjjadev.jpg" > |
تُستخدم هذه الخاصية لتحديد مسار الصورة الفعلي. |
| alt | <img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt=""> |
تُستخدم هذه الخاصية لتبديل الصورة بالنص المكتوب في حال عدم وجود الصورة. |
| width | <img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt="" width="80" > |
تُستخدم هذه الخاصية لتحديد عرض الصورة وتُصنّف ضمن قياسات الصورة. |
| height | <img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt="" width="80" height="80" > |
تُستخدم هذه الخاصية لتحديد إرتفاع الصورة وتُصنّف ضمن قياسات الصورة. |
| align | <img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt="" width="80" height="80" ailgn="right" > |
تُستخدم هذه الخاصية لتحديد إرتفاع الصورة وتُصنّف ضمن قياسات الصورة. |
استخدام الصور كروابط للتنقل
يبدو أنّنا وصلنا للحظة التي سنقوم بدمج الوسمين <img> و </a></a>، فلنستمتع أكثر بدمج الوسمين معًا بإستخدام أبسط أسلوب ممكن وهو على النحو التالي :
مثال مُصغر
<a href="https://mokfie.sa/abjjadev/"> <img src="https://mokfie.sa/abjjadev/abjjadev.jpg" alt="موقع "> </a>
وصف المثال
قمنا أولاً بفتح الوسم الخاص بالرابط ثُمّ قمنا بوضع التوجيه للرابط عند النقر أين يتمّ فتح الصفحة، ثُمّ بعد ذلك قمنا بتخصيص صورة وسط الوسم الخاص بالرابط وقمنا بتحديد مسار الصورة الفعلي – إضافةً لذلك حددنا التسمية البديلة في حال عدم توفر الصورة، وفي نهاية الكود قمنا بإغلاق الوسم الخاص بالرابط.
أليست العملية سهلة ويسيرة ؟
الأن يُمكنك تجربة ما سبق من خلال اختبار الأكواد ورؤيتها مباشرةً.
[button url=”http://codepen.io/okfie984/pen/BjGpjo” target=”blank” style=”flat” background=”#1d1954″ size=”6″ radius=”round” icon=”icon: code” desc=”انقر هنا لإختبار الأكواد”]جرّب الأمثلة الأن! [/button]
جميل ي أخ محمد الله يوفقك من كل قلبي
الأجمل حضورك وتواجدك أخوي حسن وبإذن الله نكون عند حسن الظن.
كل التوفيق لك عزيزي.
تحياتي.