HTML Nested Pages - Iframes
Iframes الصفحات المتداخلة في لغة HTML
سوف تتعرف في هذا الدرس على الصفحات المتداخلة في لغة 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
- يتم استخدام عنصر <a> مع عنصر <iframe>.
- يتم ربط العنصرين معاً عن طريق خاصية name التي تضاف إلى عنصر <iframe>.
- يمكن تحديد iframe محدّد داخل الصفحة عن طريق خاصية target فمن الممكن أن يكون هناك عناصر iframe أخرى في الصفحة.
- رابط الصفحة الجديد يكون بداخل خاصية href لعنصر <a>.
خطوات تغيير الصفحة المعروضة ضمن الإطار في لغة HTML:
- نقوم بإنشاء <iframe> ونضع داخله src attribute مع رابط الصفحة التي نريد إظهارها عندما يعرض المتصفح الصفحة الحالية مع الصفحة الثانية.
- نضع name attribute داخل عنصر Iframe ونقوم بتسميته أي اسم وليكن home.
- نقوم بإنشاء رابط عن طريق العنصر <a> ونضع داخله href attribute مع رابط الصفحة الجديدة التي نريدها أن تفتح في عنصر Iframe على المتصفح.
- نقوم بتحديد عنصر iframe عن طريق خاصية name attribute داخل العنصر <a> فقد يكون هناك عناصر iframe أخرى.
- نضع نص بين علامة الفتح والإغلاق الخاصة بالعنصر <a> مثل: Change It.
<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
إطارات
عنصر
متداخلة
سمة
قيمة
ارتفاع وعرض الإطار
عرض
ارتفاع
رابط
الهدف
اسم
تغيير
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
