HTML

HTML Nested Pages - Iframes
Iframes الصفحات المتداخلة في لغة HTML

سوف تتعرف في هذا الدرس على الصفحات المتداخلة في لغة HTML، التي هي عبارة عن دمج صفحة ويب خارجية أو داخلية مع صفحة ويب أخرى، من خلال عرض الصفحات في أحد أجزاء الصفحة الحالية، وذلك عند الإشارة إلى المواضيع الهامة.

التاريخ

29 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

6063

المواضيع

12
الشروحات chevron_left HTML Nested Pages - Iframes chevron_left HTML

Nested HTML Pages - Iframes
الصفحات المتداخلة Iframes في لغة HTML

</> Nested HTML pages - iframes
الصفحات المتداخلة Iframes في لغة HTML

تعطي لغة HTML مرونة في دمج صفحة الويب الحالية مع صفحة ويب أخرى، حيث يمكن عرض محتوى صفحة (داخلية أو خارجية) ضمن صفحة الويب الحالية عن طريق عنصر <iframe>.

  • عنصر <iframe> من نوع nested elements العناصر المُتداخلة.
  • عنصر <iframe> يحتاج إلى خاصية src مثل الصور، وذلك لكي نحدد داخله مسار صفحة HTML التي نريد عرضها، ليتم دمجها مع الصفحة الحالية.
  • وظيفة iframe الأساسية دمج صفحات أخرى مع الصفحة الحالية.
  • يمكن دمج أكثر من صفحة داخل الصفحة الحالية عن طريق استخدام عنصر iframe عدّة مرات.
  • يمكن التحكم في حجم iframe عن طريق خاصية height وخاصية width ، كما هو الحال في الصور.
  • الوضع الافتراضي لعنصر iframe هو إطار لونه رمادي يمكن إزالته.
  • يمكن فتح صفحتين في نفس الإطار الخاص بعنصر <iframe> وذلك عن طريق الضغط على رابط محدّد بحيث يتم تغيير الصفحة الحالية داخل <iframe>.

</> Iframe syntax in HTML
طريقة كتابة عنصر iframe في لغة HTML

عنصر <iframe> هو المسؤول عن دمج صفحة ويب (داخلية أو خارجية) مع صفحة الويب الحالية، وهو من نوع nested elements العناصر المُتداخلة.

  • لن يتم دمج الصفحات إلا بعد استخدام خاصية src مثل الصور في لغة HTML.
Syntax iframe element

طريقة كتابة عنصر iframe من أجل دمج صفحات الويب معاً، حتى يستطيع القارئ مشاهدة صفحة ويب ثانية، داخل الصفحة الحالية.

<iframe></iframe>
ملاحظات هامة
  • لا يعرض المتصفح شيء داخل عنصر iframe إذا لم نحدد مسار الصفحة داخل خاصية src.
  • يُفضل كتابة عنصر <iframe> كاملاً على نفس السطر، أي دون كتابة open tag علامة البدء <iframe> في سطر، و close tag علامة الإغلاق  <iframe/> في سطر آخر.
  • الحجم الافتراضي لعنصر iframe على المتصفح هو 300x150 px .

</> Src attribute with html iframe
خاصية src مع عنصر iframe في لغة HTML

تستخدم خاصية src داخل عنصر iframe لتحديد مسار الصفحة وموقعها الحالي، سواء كان موقعها على نفس الجهاز في مجلدات جانبية، أو كان موقعها من خلال server خادم على شبكة الإنترنت.


 القيمة داخل خاصية src هي url رابط صفحة، ولها حالتان:

  • إما رابط صفحة داخلية جانب صفحة HTML الحالية، فيكون الشكل: courses.html ويُسمى هذا الرابط  العنوان النسبي، كما يمكن أن يكون بهذا الشكل pages/courses.html إذا كانت الصفحة داخل مجلد. 
  • أو رابط صفحة خارجية، من الشكل:  https://www.closetag.com/courses ويُسمى هذا الرابط العنوان المطلق.
src attribute syntax

طريقة كتابة خاصية src مع عنصر iframe في لغة HTML.

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

دمج صفحة خارجية مع صفحة الويب الحالية، عن طريق رابط من server خادم آخر.

<iframe src="https://www.closetag.com">
Src attribute relative URL

مثال على دمج إطار داخل صفحة HTML، عن طريق عنوان نسبي.

<iframe src="/courses.html">

</> HTML iframe dimensions
طول وعرض iframe في لغة HTML

تُستخدم خاصية height للتحكم في طول الإطار الخاص بعنصر iframe وتُستخدم خاصية width للتحكم في عرض الإطار الخاص بعنصر iframe.

  • الحجم الافتراضي على المتصفح لعنصر iframe دون هذه الخصائص هو 300x150px.
  • تكون القيمة داخل خاصية height و width هي رقم فقط أو بعلامة px لتحديد القيمة بوحدة pixel.
  • تكتب القيمة داخل خاصية height و width بعلامة % percentage النسب المئوية لتحديد وحدة القياس percentage.
Height and width syntax

طريقة كتابة خاصية height وخاصية width مع عنصر iframe.

<iframe width="100%" height="500">
iframe dimensions

تحديد width عرض عنصر iframe بوحدة النسبة المئوية، و height طول عنصر iframe بوحدة البيكسل دون علامة px.

<iframe src="https://www.closetag.com" width="100%" height="500">
iframe dimensions with pixel

تحديد width عرض و height طول عنصر iframe بوحدة pixel البيكسل.

<iframe src="https://www.closetag.com" width="600px" height="300px">

</> Iframe Target for a Link
ظهور عدّة صفحات داخل iframe مع link في لغة HTML

يمكنك تغير القيمة الموجودة بداخل خاصية src وتبديلها بصفحة أخرى بعد عرضها أمام المستخدم، وذلك عند الضغط على link رابط وظيفته تغيير الصفحة عند الضغط عليه.
  • يتم استخدام عنصر <a> مع عنصر <iframe>.
  • يتم ربط العنصرين معاً عن طريق خاصية name التي تضاف إلى عنصر <iframe>.
  • يمكن تحديد iframe محدّد داخل الصفحة عن طريق خاصية target فمن الممكن أن يكون هناك عناصر iframe أخرى في الصفحة.
  • رابط الصفحة الجديد يكون بداخل خاصية href لعنصر <a>.


خطوات تغيير الصفحة المعروضة ضمن الإطار في لغة HTML:

  1. نقوم بإنشاء  <iframe> ونضع داخله src attribute مع رابط الصفحة التي نريد إظهارها عندما يعرض المتصفح الصفحة الحالية مع الصفحة الثانية.
  2. نضع name attribute داخل عنصر Iframe ونقوم بتسميته أي اسم وليكن home.
  3. نقوم بإنشاء رابط عن طريق العنصر <a> ونضع داخله href attribute مع رابط الصفحة الجديدة التي نريدها أن تفتح في عنصر Iframe على المتصفح.
  4. نقوم بتحديد عنصر iframe عن طريق خاصية name attribute داخل العنصر <a>  فقد يكون هناك عناصر iframe أخرى.
  5. نضع نص بين علامة الفتح والإغلاق الخاصة بالعنصر <a> مثل: Change It.
النتيجة: عند الضغط على النص الخاص بالرابط الذي هو Change It يقوم المتصفح بفتح الصفحة الجديدة التي قمنا بوضع رابطها داخل العنصر <a> بدلاً من الصفحة القديمة المعروضة داخل عنصر iframe.
<iframe src="https://www.closetag.com" name="home" width="100%" height="500"></iframe>
<p>
    <a href="https://www.closetag.com" target="home">Home</a>
</p>
مصطلحات الدرس
HTML Iframes
HTML Iframes

إطارات HTML

Iframes
Iframes

إطارات

Element
Element

عنصر

Nested
Nested

متداخلة

Value
Value

قيمة

Iframe Hight and Width
Iframe Hight and Width

ارتفاع وعرض الإطار

Width
Width

عرض

Hight
Hight

ارتفاع

Link
Link

رابط

Target
Target

الهدف

Name
Name

اسم

Change
Change

تغيير

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
Src
Src

source

مصدر
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.