الإطارات HTML IFrame

الدرس السابق الدرس التالي
 الإطارات  HTML IFrame
يتم استخدام إطار HTML iframe لعرض صفحة ويب داخل صفحة ويب.
بناء جملة الإطارHTML Iframe Syntax
تحدد علامة <iframe> إطارًا مضمنًا.
يتم استخدام الإطار المضمن لتضمين مستند(document) آخر داخل مستند(document) HTML الحالي.
بناء الجملة

<iframe src="url" title="description"></iframe>

نصيحة: من الممارسات الجيدة دائمًا تضمين title  لـ <iframe>. يتم استخدام هذا بواسطة برامج قراءة الشاشة لقراءة محتوى إطار iframe.
ضبط الارتفاع والعرض للإطار Height and Width
استخدم سمات  height  وwidth  لتحديد حجم إطار iframe.
يتم تحديد الارتفاع والعرض بالبكسل افتراضيًا:
مثال
<!DOCTYPE html>
<html>
<body>

<h2> إطارات HTML Iframes </h2>
<p> يمكنك استخدام سمات الطول والعرض لتحديد حجم إطار iframe: </p>

<iframe src="https://itqan7.blogspot.com/2021/12/class-attribute-html.html" height="200" width="300" title="Iframe Example"></iframe>

</body>
</html>
أو يمكنك إضافة سمة style واستخدام خصائص ارتفاع وعرض CSS:
مثال
<!DOCTYPE html>
<html>
<body>

<h2> إطارات HTML Iframes </h2>
<p> يمكنك أيضًا استخدام خصائص ارتفاع وعرض CSS لتحديد حجم إطار iframe: </p>


<iframe src="https://itqan7.blogspot.com/2021/12/class-attribute-html.html" style="height:200px;width:300px" title="Iframe Example"></iframe>

</body>
</html>

إزالة حدود الإطارRemove the Border
بشكل افتراضي ، يحتوي إطار iframe على حدود حوله.
لإزالة الحد ، أضف سمة style واستخدم خاصية CSS border:
مثال
<!DOCTYPE html>
<html>
<body>

<h2> إزالة حدود Iframe </h2>
<p> لإزالة الحد الافتراضي لإطار iframe ، استخدم CSS: </p>

<iframe src="https://itqan7.blogspot.com/2021/12/class-attribute-html.html" style="border:none;" title="Iframe Example"></iframe>

</body>
</html>
باستخدام CSS ، يمكنك أيضًا تغيير حجم ونمط ولون حدود iframe:
مثال
<!DOCTYPE html>
<html>
<body>

<h2> حدود Iframe المخصصة </h2>
<p> باستخدام CSS ، يمكنك أيضًا تغيير حجم ونمط ولون حدود iframe: </p>

<iframe src="https://itqan7.blogspot.com/2021/12/class-attribute-html.html" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>
هدف الرابط Target for a Link
يمكن استخدام إطار iframe كإطار هدف للارتباط.
يجب أن تشير السمة  Target للرابط إلى سمة name الخاصة بإطار iframe:
مثال
<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe src="https://itqan7.blogspot.com/2021/12/class-attribute-html.html" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://itqan7.blogspot.com/" target="iframe_a">itqan7.blogspot.com</a></p>

<p> عندما تتطابق السمة Target للرابط مع name iframe ، سيتم فتح الرابط في iframe. </p>

</body>
</html>
ملخص الفصل 
  • تحدد علامة <iframe> إطارًا مضمنًا
  • تحدد السمة src عنوان URL للصفحة المراد تضمينها
  • قم دائمًا بتضمين سمة title (لقارئات الشاشة)
  • تحدد سمات height  و width حجم إطار iframe
  • استخدام border:none;  لإزالة الحدود حول إطار iframe
الدرس السابق الدرس التالي
القسم: