21/02/2024
تعلم أساسيات HTML

الدرس الثامن عشر – شرح الإطارات HTML Iframes باللغة العربية

سنقوم فى هذا الدرس بشرح الإطارات HTML Iframes تستخدم اطارات iframe فى HTML لعرض صفحة ويب داخل صفحة ويب أخرى . حيث يستخدم العنصر iframe لإدراج اطار يحتوى على الصفحة المراد عرضها بالصيغة التالية:

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

يفضل دائما استخدام السمة title للعنصر iframe حيث يقرأها قارئ الشاشة ليخبر المستخدم بمحتوى الإطار الداخلى iframe.


شرح الإطارات HTML Iframes – ضبط حجم اطار المحتوى iframe

لضبط العرض نستخدم السمة width بينما لضبط الارتفاع نستخدم السمة height لتحديد حجم اطار iframe . ويتم وضع القيم بداخلهم بمقياس البكسل pixels كما فى المثال التالى:

 <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> 

أو يمكن ضبط حجم iframe باستخدام السمة style عن طريق اكواد CSS الخاصة بالعرض والارتفاع height و width . كما هو موضح فى المثال التالى:

 <iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> 

شرح الإطارات HTML Iframes – إزالة تحديد بوردر iframe

بشكل تلقائى يكون iframe محددا بإطار يحيط به . لإزالة التحديد نقوم باستخدام الخاصية border فى أكواد CSS بداخل السمة style كما هو موضح فى المثال التالى:

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

كما يمكن أيضا باستخدام أكواد CSS تعديل حجم إطار التحديد وشكله ولونه كما فى المثال التالى:

 <iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe> 

استهداف اطار iframe لفتح رابط أو لينك

يمكن استهداف iframe معين لفتح رابط أو لينك عند الضغط عليه باستخدام السمة target لاستهداف الإطار فى عنصر الرابط. بالإضافة إلى السمة name فى عنصر iframe لتسميته كما هو موضح فى المثال التالى:

 <iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.gaawy.com" target="iframe_a">gaawy.com</a></p> 


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →