الإطار في HTML: وش سالفته؟
يا هلا بالشباب! اليوم بنتكلم عن "الإطارات" أو "Frames" في HTML. يمكن بعضكم مر عليها، وبعضكم ما يدري وش هي بالضبط. باختصار، الإطار يسمح لك تعرض صفحة ويب داخل صفحة ويب ثانية. يعني زي نافذة صغيرة جوا صفحتك.
أولاً: الـ <iframe> (الخوي اللي ما زال معنا)
هذا هو الأهم واللي بنركز عليه. الـ <iframe> يسمح لك تحط محتوى من موقع ثاني (أو حتى من نفس موقعك) داخل صفحتك الحالية. تخيل إنك تبي تعرض فيديو يوتيوب، أو خريطة قوقل، أو حتى صفحة ويب كاملة جوا صفحتك. هذا هو شغله.
كيف تستخدمه؟
بسيط جداً. أهم شيء تحدد له المصدر src اللي هو عنوان الصفحة اللي تبي تعرضها.
مثال:
<iframe src="https://www.example.com" width="600" height="400" title="صفحة ويب خارجية"></iframe>أهم خصائص الـ <iframe>
src: (ضروري) عنوان URL للصفحة اللي بتنعرض داخل الإطار.widthوheight: تحدد عرض وارتفاع الإطار بالبكسل أو النسبة المئوية.title: (مهم جداً للوصولية) وصف موجز لمحتوى الإطار، عشان قارئات الشاشة تفهمه.frameborder: (مستبعد الآن) كان يستخدم لتحديد هل الإطار له حدود أو لا. قيمته1أو0. الآن يفضل تستخدم CSS للتحكم بالحدود.allow: يسمح لك تحدد صلاحيات معينة للإطار، زي تشغيل الكاميرا، المايكروفون، أو وضع ملء الشاشة. مثلاً:allow="fullscreen; camera"sandbox: (مهم للأمان) يطبق قيود إضافية على المحتوى داخل الإطار لمنع بعض العمليات اللي ممكن تكون خطيرة. قيمته ممكن تكون فارغة لتطبيق كل القيود، أو تحدد استثناءات معينة.
ملاحظة مهمة: لما تستخدم
<iframe>لعرض محتوى من مواقع ثانية، انتبه لموضوع الأمان (Security) وسياسة نفس الموقع. بعض المواقع ما تسمح تعرض محتواها داخل<iframe>لأسباب أمنية أو لحقوق الملكية، وممكن تواجه مشاكل زي "X-Frame-Options" أو "Content Security Policy".
ثانياً: الـ <frameset> والـ <frame> (وداعاً يا أصدقاء الماضي)
يمكن بعضكم سمع عنهم، أو شافهم في مشاريع قديمة جداً. الـ <frameset> والـ <frame> كانت طريقة لتقسيم صفحة الويب لعدة إطارات، كل إطار يحمل صفحة HTML مختلفة. كانت تستخدم لعمل تخطيطات معقدة للصفحة، زي قائمة تنقل ثابتة على اليسار والمحتوى يتغير على اليمين.
مثال (للتعلم فقط، لا تستخدمه!):
<!-- هذا الكود قديم جداً ولا ينصح باستخدامه أبداً -->
<!-- كان يحل محل وسم <body> -->
<!--
<frameset cols="25%,75%">
<frame src="menu.html" name="left_frame">
<frame src="content.html" name="main_frame">
</frameset>
-->ليش ما نستخدمهم الحين؟ باختصار، لهم مشاكل كثيرة: صعوبة في الوصولية (Accessibility)، مشاكل في الـ SEO (محركات البحث)، صعوبة في الطباعة، ومشاكل في التعامل معهم بالـ JavaScript. غير كذا، الـ HTML5 ألغاهم تماماً (Deprecated). الآن نستخدم CSS و JavaScript عشان نسوي نفس التأثيرات بطرق أفضل وأكثر مرونة.
خلاصة الكلام
إذا كنت بتستخدم "إطارات"، ركز على <iframe> بس. هذا هو اللي ما زال له استخدامات عملية ومهمة، خصوصاً لدمج محتوى خارجي (Embedded Content). أما <frameset> و <frame>، اتركها في كتب التاريخ ولا تفكر تستخدمها في مشاريعك الجديدة.
وبكذا نكون خلصنا درس اليوم عن الإطارات. أتمنى إن الشرح كان واضح ومفيد. نشوفكم في دروس قادمة!