يُستخدم الإطار المضمن (iframe) في HTML لعرض صفحة ويب داخل صفحة ويب أخرى. بمعنى آخر، يمكنك وضع نافذة صغيرة داخل صفحتك لعرض محتوى من موقع آخر. فمثلاً، يمكنك تضمين مقطع فيديو من YouTube أو خريطة تفاعلية من Google Maps داخل صفحتك الخاصة.
صياغة الإطارات المضمنة (Iframe) في HTML
يُستخدم الوسوم <iframe> في HTML لإنشاء إطار مضمن. وهو عبارة عن نافذة صغيرة داخل صفحتك تعرض محتوى من موقع آخر.
الصياغة الأساسية:
<iframe src="url" title="description"></iframe>
نصيحة:
من الممارسات الجيدة دائمًا تضمين خاصية title لعلامة <iframe>. يتم استخدام هذه الخاصية من قبل قراء الشاشة لإقراء محتوى الإطار على المستخدمين الذين يستخدمون برامج مساعدة.
الإطارات المضمنة (Iframe) – تحديد الارتفاع والعرض
يمكنك استخدام الخاصيتين height و width لتحديد حجم الإطار المضمن (iframe) داخل صفحتك.
يتم تحديد الارتفاع والعرض بشكل افتراضي بوحدة البكسل (px).
مثال:
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
أو يمكنك إضافة خاصية style واستخدام خصائص ارتفاع وعرض CSS:
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
إطار مضمن (Iframe) – إزالة الحافة
بشكل افتراضي، يوجد إطار حول الإطارات المضمنة (iframe) في صفحات الويب. لإزالة هذا الإطار، يمكنك استخدام خاصية style مع خاصية border في CSS.
المثال:
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
مع CSS، يمكنك أيضًا تغيير حجم ونمط ولون حافة الإطار المضمن (Iframe)
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
الإطار المضمن (Iframe) – كهدف لرابط
يمكن استخدام الإطار المضمن كهدف لرابط في صفحتك، مما يسمح لك بالتحكم في المكان الذي سيظهر فيه محتوى الرابط عند النقر عليه.
لتحقيق ذلك، تحتاج إلى ربط خاصية target للرابط باسم الإطار المضمن الذي تريده أن يكون الهدف:
المثال:
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://menoufy.me/" target="iframe_a">menoufy.me</a></p>
ملخص الفصل:
- تستخدم علامة
<iframe>في HTML لإدراج إطار مضمن. - تحدد الخاصية
srcرابط الصفحة التي سيتم تضمينها. - تأكد دائمًا من تضمين خاصية
title(للمساعدين الصوتيين). - تحدد الخاصيتين
heightوwidthحجم الإطار المضمن. - استخدم
border: none;لإزالة الحافة حول الإطار المضمن.
