X

أساسيات اتش.تي.إم.إل

١٥. العمل مع عنصر iframe

نظري

أ. ما هي العناصر المُستبدلة Replaced Elements، وما هي بعض الأمثلة عليها؟

العنصر المُستبدل A replaced element هو عنصر يُحدَّد محتواه بواسطة مورد خارجي external resource وليس بواسطة CSS نفسه. يُستخدم CSS,، أو أوراق الأنماط المتتالية cascading stylesheets، لإضافة أنماط styles إلى صفحات الويب. من الأمثلة الشائعة على العناصر المُستبدلة replaced elements عناصر الصورة والإطار الداخلي iframe والفيديو.

باستخدام العناصر المُستبدلة replaced elements، يمكنك التحكم في موضع position أو تخطيط عنصر ما. ولكن لا يمكن لـ CSS تعديل محتوى هذا العنصر مباشرةً directly. قد يكون شرح ذلك أسهل مع بعض الأمثلة.

خذ بعين الاعتبار عنصر الصورة، الذي يقوم بتضمين صورة على صفحتك على الويب:


<img src="مثال-عنوان-رابط-صورة" alt="النص الوصفي هنا">

يُستبدل العنصر نفسه بالعنصر الخارجي: الصورة. يمكن لـ CSS التحكم في أمور مثل موضع الصورة positioning of the image، أو تطبيق مُرشِّح filter عليها، ولكن لا يمكنك تعديل modify الصورة نفسها. مثال أكثر فعالية هو عنصر iframe، الذي يُضمِّن موقعًا خارجيًا an external site على صفحتك الإلكترونية on your web page.

هذا مثال على استخدام عنصر iframe لفيديو يوتيوب شهير على قناة freeCodeCamp. لمشاهدة فيديوهات مختلفة، غيّر قيمة السمة src إلى الفيديو الذي تختاره.

ملاحظة: لا تقلق بشأن السمات الإضافية المذكورة في المثال التفاعلي، مثل referrerpolicy وallowfullscreen. ستتعلم المزيد حول العمل مع عناصر iframe في ورشة عمل workshop مستقبلية.

الكود :

code 

<iframe width="400" height="200" src="https://www.youtube.com/watch?v=u43gJJrVa1I&source_ve_path=MTc4NDI0" title="Professional Cloud Architect Certification Course – Pass the Exam! (YouTube video)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

معاينة :

من الأمثلة الشائعة الأخرى لاستخدام عنصر iframe تضمين الخرائط في الصفحة. إليك مثال على خريطة مُضمَّنة.

الكود :

code 

<iframe
  title="Map of the Royal Observatory, Greenwich, London"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

معاينة :

حاول التفاعل مع الخريطة map نفسها عن طريق التكبير/التصغير zooming in/out.

يُستبدل العنصر نفسه بالكائن الخارجي: الموقع. يُمكن لـ CSS تغيير موضع الموقع المُضمّن the positioning of the embedded site، ولكن لا يُمكنك تعديل محتوياته contents. للتوضيح، إذا كان الموقع المُضمّن يحتوي على عنصر h1، فلن تتمكن CSS من تنسيقه. لا يُمكنك تغيير حجم size الخط أو لونه color,، وما إلى ذلك.


هناك عناصر أخرى مُستبدلة، مثل الفيديو video والتضمين embed. وبعضها يتصرف كعناصر مُستبدلة في ظروف محددة specific circumstances.

فيما يلي مثال لعنصر إدخال input مع تعيين سمة النوع type إلى صورة image:

			
<input type="image" alt=النص الوصفي هنا" src="مثال-عنوان-رابط-صورة">

يعتبر هذا النوع من الإدخال input بمثابة عنصر بديل replaced element، ولكن أنواع الإدخال input الأخرى مثل النص text أو البريد الإلكتروني email ليست عناصر بديلة not replaced elements.

أسئلة :

ما الذي يمكنك تصميمه في العنصر المستبدل replaced element ؟

١. حجم الخط The font size. ❌

٢. التصميم أو الموقع The layout or positioning. ✅

٣. لون النص The color of specific text. ❌

٤. كل شيء Everything. ❌


ما هو العنصر الذي تم استبداله؟

١. كائن خارجي An external object. ✅

٢. عنصر آخر Another element. ❌

٣. بعض رموز CSS. ❌

٤. تجميع Assembly. ❌


أي مما يلي هو العنصر المستبدل a replaced element ؟

١. h1 ❌

٢. p ❌

٣. iframe ✅

٤. a ❌

ب. كيف تُضمّن مقاطع فيديو في صفحتك باستخدام عنصر "ايفرام" iframe ؟

في درس سابق، تعرّفت لأول مرة على عنصر iframe. في هذا الدرس، ستتعلم المزيد عن كيفية التعامل معه. يرمز هذا العنصر إلى "إطار مضمّن". وهو عنصر مضمّن يُستخدم لتضمين محتوى اتش.تي.إم.إل HTML content آخر مباشرةً داخل صفحة اتش.تي.إم.إل HTML page. يمكن أن يكون هذا المحتوى فيديو video، أو خريطة map، أو عنصر اتش.تي.إم.إل HTML element آخر، أو حتى صفحات ويب أخرى other web pages.

فيما يلي مثال على تضمين دورة freeCodeCamp الشهيرة من يوتيوب YouTube :

الكود :

code 

<iframe
	width="400"
  	height="400"
	src="https://www.youtube.com/embed/PkZNo7MFNFg?si=-UBVIUNM3csdeiWF"
	title="Learn JavaScript - Full Course for Beginners (YouTube video)"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	referrerpolicy="strict-origin-when-cross-origin"
	allowfullscreen >
</iframe>

معاينة :

تُحدد سمة src عنوان URL للصفحة التي تُريد تضمينها. تُحدد سمة width عرض الإطار المُضمّن iframe . تُحدد سمة height ارتفاع الإطار المُضمّن iframe. تتيح سمة allowfullscreen للمستخدم عرض الإطار المُضمّن iframe في وضع ملء الشاشة full screen mode. يُنصح أيضًا بتحديد سمة title للإطار المُضمّن iframe، نظرًا لأهميتها في سهولة الوصول accessibility.

لاحظ أنه يمكن تحميل الفيديو من أي مكان. ليس بالضرورة أن يكون من خدمات فيديو video services مثل يوتيوب YouTube و"فيميو" Vimeo.

لا تنسَ أنه يمكنك أيضًا تضمين خريطة map، أو صفحة ويب web page أخرى، أو شفرة اتش.تي.إم.إل HTML مباشرة داخل عنصر iframe

فيما يلي مثال لخريطة مضمنة embedded map :

الكود :

code 

<h1>خريطة مضمنة من Openstreetmap.org مع عنصر iframe</h1>

<iframe
  width="425"
  height="350"
  src="https://www.openstreetmap.org/export/embed.html?bbox=3.006134033203125%2C6.150112578753815%2C3.6357879638671875%2C6.749850810550778&layer=mapnik"
  title="Map of Lagos area, Nigeria"
  style="border: 1px solid black"
>
</iframe>
<br />
<small>
  <a href="https://www.openstreetmap.org/#map=11/6.4501/3.3210">
    عرض أكبر للخريطة
  </a>
</small>

معاينة :

إذا كنت تريد تضمين اتش.تي.إم.إل HTML مباشرًا داخل عنصر iframe، فيجب عليك استخدام سمة srcdoc بدلاً من src.

أسئلة :

ماذا يعني iframe ؟

١. إطار دولي International frame. ❌

٢. نموذج مضمّن Inline form. ❌

٣. إطار مضمّن Inline frame. ✅

٤. عنصر نموذج مضمّن Inline form element. ❌


ما هي سمة عنصر iframe التي تحدد موقع ما تريد تضمينه؟

١. src ✅

٢. url ❌

٢. frameborder ❌

٤. cross-origin ❌


ما هي سمة عنصر iframe التي تستخدمها بدلاً من src إذا كنت تريد تضمين HTML مباشرًا؟

١. html ❌

٢. document ❌

٣. srcweb ❌

٤. srcdoc ✅