الكورس

Advertisements

HTML Iframes | In Arabic


HTML iframe – فى هذا الفصل هنتعرف على الإطار فى لغة HTML. وهنعرف كيفية إستخدامه بطريقة صحيحة؟ وكل المعلومات حوله، مع بعض الأمثلة التوضيحية.


 

HTML Iframes

 

يتم استخدام الأٌطر iframes فى لغة HTML لعرض الكائنات الخارجية بما في ذلك صفحات الويب الأخرى داخل صفحة الويب الحالية.

يعمل العنصر iframe إلى حد كبير مثل متصفح الويب المصغر داخل متصفح الويب.

يتم إنشاء الإطار باستخدام وسم الـ <iframe> (إختصار لكلمة frame)، حيث يمثل الوسم <iframe> سياق تصفح متداخلًا ، يدمج صفحة HTML أخرى في الصفحة الحالية، كما قُلت من قبل.

المحتوى داخل الـ <iframe> موجود بشكل مستقل تمامًا عن العناصر المحيطة به.


 

البنية الخاصة بالوسم <iframe>

 

<iframe src="URL"></iframe>

مثال للتوضيح

أحد الاستخدامات الشائعة للـ iframe هو تضمين خريطة جوجل في الصفحة:

1 Map
<iframe src="https://maps.google.com/maps?q=egypt&t=&z=13&ie=UTF8&iwloc=&output=embed"></iframe>
1 Map

تحدد سمة src عنوان الـ URL للصفحة المراد عرضها في الإطار.

 يمكن أن يكون محتوى الـ iframe موجودًا فى صفحة HTML (إما تقع على نفس الخادم أو في أي مكان آخر الويب).


 

تعيين عرض وارتفاع الإطار – Iframe

 

لتعيين أبعاد الإطار يتم إستخدم هذه السمات:

  • height لتحديد ارتفاع الإطار.
  • width لتحديد عرض الإطار.

 

مثال للتوضيح

لتعيين عرض وارتفاع الإطار بإستخدام السمات (height – width):

<iframe src="https://www.albashmoparmeg.com/" height="400" width="500"></iframe>

يتم تحديد قيم سمات (height – width) بالبكسل افتراضيًا ، ولكن يمكنك أيضًا تعيين هذه القيم كنسبة مئوية مثل 50٪ و 100٪.

يبلغ العرض الافتراضي للإطار 300 بكسل ، بينما يبلغ الارتفاع الافتراضي 150 بكسل.

مثال للتوضيح

يمكنك أيضًا تعيين عرض وارتفاع الإطار بإستخدام CSS، كالتالى:

<iframe src="https://www.albashmoparmeg.com/" style="height: 400px; width: 500pxك"></iframe>

 

إزالة حدود الإطار الافتراضية

 

عنصر الـ <iframe> يتم تحديده بحدود (borders)افتراضيًا، ومع ذلك إذا كنت تريد إزالة هذه الحدود، فإن أفضل طريقة هي استخدام خاصية الـ border الموجودة فى CSS.

 

مثال للتوضيح

سيعرض المثال التالي الإطار بدون أي حدود:

<iframe src="https://www.albashmoparmeg.com/" height="400" width="500" style="border: 4px solid blue"></iframe>

 

Border Property

 

يمكنك أيضًا استخدام خاصية الـ border لإضافة الحدود التي تختارها إلى الإطار. كما هو موضح فى المثال التالى:

مثال للتوضيح

سيعرض المثال التالي الإطار بحدود سُمكها 4 بكسل وبلون أزرق:

<iframe src="https://www.albashmoparmeg.com/" height="400" width="500" style="border: 4px solid blue"></iframe>

 

استخدام الإطار كـ رابط – Target Link

 

يمكن أيضًا استخدام الإطار كهدف للروابط التشعبية (hyperlinks).

يمكن تسمية الإطار باستخدام سمة name، وهذا يعني أنه عند النقر فوق رابط يحتوى على بسمة target بهذا الاسم كقيمة ، سيتم فتح المصدر المرتبط في الإطار.

 

مثال للتوضيح

فى المثال التالى عند النقر على الرابط “Courses page” سيتم عرض صفحة “Courses” فى الإطار:

<iframe src="demo.html" name="courses"></iframe>
<p><a href="https://www.albashmoparmeg.com/courses/" target="courses">Courses Page</a></p>

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Iframe” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.





الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements