HTML Nested Pages - Iframes
Iframes الصفحات المتداخلة في لغة HTML
سوف تتعرف في هذا الدرس على الصفحات المتداخلة في لغة HTML، وهي تقنية لدمج صفحة ويب داخلية أو خارجية مع صفحة ويب أخرى، من خلال عرض الصفحة المدمجة في جزء من الصفحة الحالية، وذلك لتسهيل الوصول إلى المواضيع الهامة.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Nested Pages - Iframes
Iframes الصفحات المتداخلة في لغة HTML
</>
Nested HTML pages - iframes
الصفحات المتداخلة Iframes في لغة HTML
لغة HTML تعطي مرونة في دمج صفحة ويب حالية مع أخرى باستخدام عنصر <iframe>. يُستخدم هذا العنصر لعرض محتوى صفحة أخرى سواء كانت [داخلية أو خارجية] ضمن الصفحة الحالية.
- عنصر <iframe> يعتبر من نوع العناصر المتداخلة [nested elements] له علامة فتح <iframe> وعلامة إغلاق <iframe/>.
- عنصر <iframe> يحتاج إلى خاصية [src] لتحديد مسار صفحة HTML المراد عرضهافي الإطار.
- الهدف الأساسي من استخدام <iframe> هو دمج صفحات أخرى مع الصفحة الحالية، مما يسمح بعرض أكثر من صفحة باستخدام هذا العنصر عدة مرات.
- يمكن التحكم في أبعاد <iframe> باستخدام خصائص [height] و [width]، تمامًا مثل الصور.
- بحالة الافتراضية، يظهر <iframe> بإطار رمادي، ويمكن إزالة هذا الإطار باستخدام [;"style="border:none] في لغة CSS.
- يمكن فتح صفحات متعددة في نفس إطار <iframe> عن طريق روابط محددة تقوم بتغيير المحتوى داخل <iframe> باستخدام JavaScript أو بتعديل خاصية [src].
</>
Iframe Syntax in HTML
طريقة كتابة عنصر iframe في لغة HTML
عنصر <iframe> هو المسؤول عن دمج صفحة ويب [داخلية أو خارجية] مع الصفحة الحالية.
- لا يمكن دمج الصفحات إلا بعد استخدام خاصية [src] لتحديد مسار الصفحة المطلوبة، كما هو الحال في الصور في لغة HTML.
Syntax of the <iframe> Element
طريقة كتابة عنصر <iframe> لدمج صفحات ويب، مما يتيح للقارئ عرض صفحة ويب ثانية داخل الصفحة الحالية.
<iframe></iframe>
ملاحظات هامة
- لا يعرض المتصفح أي شيء داخل عنصر <iframe> إذا لم نحدد مسار الصفحة في خاصية.
- يُفضل كتابة عنصر <iframe> كاملاً على نفس السطر، دون تقسيم علامة الفتح <iframe> وعلامة الإغلاق <iframe/> أو وضع خاصية [src] في سطر منفصل.
- الحجم الافتراضي لعنصر <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، وهذا يُسمى بالعنوان المطلق.
<Syntax for the src Attribute in <iframe
كيفية كتابة خاصية src مع عنصر <iframe> في لغة HTML لتحديد رابط الصفحة.
<iframe src="URL"></iframe>
Absolute URL
دمج صفحة ويب خارجية مع الصفحة الحالية باستخدام رابط من خادم [server] آخر.
<iframe src="https://rockdash.com">
Relative URL for src Attribute
مثال على دمج إطار داخل صفحة HTML باستخدام عنوان نسبي [رابط داخلي].
<iframe src="/courses.html">
</>
HTML iframe Dimensions
طول وعرض الإطار iframe في لغة HTML
تُستخدم خاصية [height] للتحكم في طول عنصر <iframe>، وتُستخدم خاصية [width] للتحكم في عرضه.
- الحجم الافتراضي لعنصر [<iframe>] في المتصفح هو 300x150px بكسل.
- يمكن أن تكون القيم داخل خاصيتي [height] و[width] إما رقمًا فقط أو مرفقة بـ علامة [px] لتحديد القيمة بوحدة البكسل.
- كما يمكن تحديد القيم باستخدام علامة [%] percentage لتمثل النسبة المئوية.
Syntax for height and width Attributes
كيفية كتابة خاصيتي height و width مع عنصر <iframe>.
<iframe width="100%" height="500">
iframe Dimensions
تحديد عرض عنصر <iframe> بوحدة النسبة المئوية، وطوله بوحدة البكسل بدون استخدام علامة px.
<iframe src="https://www.closetag.com" width="100%" height="500">
iframe Dimensions with Pixels
تحديد عرض وطول عنصر <iframe> بوحدة البكسل.
<iframe src="https://rockdash.com" width="600px" height="300px">
</>
Iframe Target for a Link
ظهور عدّة صفحات داخل iframe مع link في لغة HTML
يمكنك تغيير القيمة الموجودة في خاصية [src] لعنصر <iframe> واستبدالها بصفحة أخرى بعد عرضها على المستخدم، وذلك بالضغط على رابط [link] يغير الصفحة المعروضة.
- يتم ذلك باستخدام عنصر <a> مع عنصر <iframe>.
- يتم ربط العنصرين باستخدام خاصية [name] في عنصر <iframe>.
- يمكن تحديد إطار معين داخل الصفحة باستخدام خاصية [target] في عنصر <a>، حيث قد يكون هناك عناصر <iframe> أخرى في الصفحة.
- رابط الصفحة الجديد يكون بداخل خاصية [href] لعنصر <a>.
- إنشاء عنصر <iframe> وتحديد خاصية [src] بالرابط المطلوب عرضه مبدئياً.
- إضافة خاصية [name] لعنصر <iframe>, ونقوم بتسميته أي اسم وليكن login مثال: ["name="login].
- إنشاء رابط باستخدام العنصر <a> وتحديد خاصية [href] بالرابط الجديد المطلوب عرضه في <iframe>.
- تحديد عنصر <iframe> المستهدف باستخدام خاصية [target] في <a>, بحيث تتوافق مع خاصية [name] في <iframe>.
- إضافة نص للنقر عليه داخل علامات الفتح والإغلاق لعنصر <a>،مثل: [login].
النتيجة: عند الضغط على النص [login]، يقوم المتصفح بتحميل الصفحة الجديدة داخل الإطار المحدد بدلاً من الصفحة القديمة.
Using <iframe> with Targeted Links
كيفية تغيير محتوى <iframe> عبر النقر على رابط عن طريق استخدام خاصيتي name و target لتحديد الهدف.
<iframe src="https://rockdash.com" name="login" width="100%" height="500"></iframe>
<p>
<a href="https://rockdash.com/login" target="login">login</a>
</p>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
