شرح كامل لكود Html iframe وطريقة استخدامه

شرح كامل لكود Html iframe وطريقة استخدامه

Iframe هو يتم استعماله لإظهار صفحة ويب داخل صفحة أخرى.

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

من أهم استعمالات هذه الأداة، إظهار نموذج لقالب أو أداة حتى يراها الزائر ويقوم بتجربتها.

كود Iframe وكيفية استخدامه

الكود:

<iframe src="URL"></iframe>
لإظهار مدونة فولفولي يكفي تغيير URL بالأحمر برابط موقع فولفولي www.folfoly.com ليظهر في الصفحة التي تريدها.

إعدادت التحكم

الطول والعلو Height and width


<iframe src="www.folfoly.com" height="200" width="300"></iframe>

height للتحكم في الطول أو العلو.
width للتحكم في العرض.

الحد Border

Iframe يكون معها حد بشكل عشوائي، ولديك خياران باستعمال CSS:

1. حذف الحد بإضافة قاعدة border: none اي عدم إظهار الحد نهائيا.

<iframe src="demo_iframe.htm" style="border: none;"></iframe>

2. إضافة حد من اختيارك
  • 2px حجم الحد.
  • solid نوع الحد.
  • grey لون الحد ( يمكنك استخدام أداة أكواد الألوان لاختيار اللون الذي يناسبك).



<iframe src="demo_iframe.htm" style="border: 2px solid grey;"></iframe>

إذا كانت بعض الأكواد غريبة بالنسبة لك، يمكنك مراجعة تصميم المواقع بHTML و CSS.

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله