HTML الأطر

مفهوم الأطر

إطار ( Frame ) تعني تخصيص مكان في الصفحة يتم فيه عرض محتوى موجود في صفحة أخرى.
بمعنى آخر الإطار يتيح لك عرض محتوى صفحة HTML بداخل صفحة HTML أخرى.

إضافة إطار في الصفحة

بشكل عام نستخدم الوسم <iframe> على هذا النحو <iframe src="url"></iframe> لعرض إطار في الصفحة.
مكان الكلمة url نضع مسار الصفحة التي نريد عرضها بداخله.


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

مثال

<iframe src="https://harmash.com"></iframe>
		

جرب الكود

تحديد حجم الإطار

الإطار الذي تعرضه في الصفحة يتم عرضه في مساحة صغيرة جداً فيها ما لم تحدد الحجم بنفسك كما رأيت في المثال السابق.

في العادة حجم الإطار نقوم بتحديده بواسطة كود CSS لأنها توفر طرق سهلة و أفضل لذلك و لكن بما أننا ندرس لغة HTML سنركز على الخصائص التي توفرها لنا لغة HTML لتحديد حجم الإطار:

  • width نستخدمها لتحديد عرض الإطار الذي سيتم عرضه بالبكسل.
  • height نستخدمها لتحديد طول الإطار الذي سيتم عرضه بالبكسل.


معلومة

العرض يمكنك تحديده بنسبة مئوية فمثلاً يمكنك جعل عرض الإطار 100% حتى يساوي عرض كامل الصفحة.
الطول في حال وضعته 100% لن تلاحظ أي فرق و سبب ذلك أنك بحاجة لجعل طول الصفحة الأساسي هو 100% حتى يعمل.
لا تشغل بالك بموضوع طول الإطار لأنك ستتعلم كيف تتلاعب فيه بكل سهولة حين تدرس لغة CSS.



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

المثال الأول

<iframe src="https://harmash.com/tutorials/html" width="400" height="400"></iframe>
		

جرب الكود



في المثال التالي قمنا بعرض إطار في الصفحة مع تحديد أن عرضه 100% و طوله 400 بكسل و فيه سيتم عرض محتوى الصفحة الأولى في الدورة.

المثال الثاني

<iframe src="https://harmash.com/tutorials/html" width="100%" height="400"></iframe>
		

جرب الكود

إضافة عنوان للإطار

العنوان الذي نضعه للإطار ليس الهدف منه أن يتم عرضه في الصفحة, أي لا يتم عرضه في الصفحة أمام المستخدم.

أهمية العنوان الذي نضعه للإطار هو أنه في حال كان المستخدم كفيف و يعتمد على قارئ الشاشة ( Screen Reader ) حتى يقرأ له محتوى الصفحة, فإن القارئ سيقرأ العنوان الموضوع في الإطار و هكذا سيعلم المستخدم أنه يوجد إطار في الصفحة.

لوضع عنوان للإطار قم بإضافة الخاصية title للوسم <iframe> و تمرير العنوان لها كقيمة على هذا النحو <iframe title="text">.


في المثال التالي قمنا بوضع عنوان للإطار الذي أضفناه في الصفحة مع تحديد حجم الإطار و رابط الصفحة التي سيتم عرض محتواها فيه.

مثال

<iframe src="https://harmash.com/tutorials/html" width="100%" height="400" title="First lesson in the HTML tutorial"></iframe>
		

جرب الكود

فتح رابط بداخل إطار

في حال أردت فتح الرابط الموضوع في الصفحة بداخل إطار موضوع في نفس الصفحة, يمكنك إضافة الخاصية name للإطار و تمرير إسم خاص بها, بعدها تقوم بتمرير الإسم الذي وضعته نفسه للخاصية target في الرابط.


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

مثال

<a href="https://harmash.com/tutorials/html" target="my_iframe">Open HTML Tutorial</a>

<iframe name="my_iframe"></iframe>
		

جرب الكود

عرض فيديو من يوتيوب في الصفحة

أي فيديو تجده في يوتيوب يمكنك عرضه بكل سهولة بداخل الصفحة بدون الحاجة لكتابة أي كود بنفسك حيث أن يوتيوب يوفر لك خيار إسمه تضمين ( Embed ) بمجرد النقر عليه يعطيك كود إطار يعرض الفيديو.


معلومة

لتجد خيار التضمين ( Embed ) أنقر على زر المشاركة ( Share ) الذي تجده تحت الفيديو و سيظهر لك.
بعدها أنقر عليه حتى يعطيك الكود الذي يمكنك نسخه و وضعه في الصفحة.


في المثال التالي قمنا بوضع كود حصلنا عليه بعد النقر على زر التضمين ( Embed ) لفيديو موجود في يوتيوب.

مثال

<iframe
    width="560"
	height="315"
    src="https://www.youtube.com/embed/bfaPnlYE8Jo"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>
		

جرب الكود

الدورات

أدوات مساعدة

الأقسام

دورات
مقالات أسئلة مشاريع كتب