HTMLالأطر
- مفهوم الأطر
- إضافة إطار في الصفحة
- تحديد حجم الإطار
- إضافة عنوان للإطار
- فتح رابط بداخل إطار
- عرض فيديو من يوتيوب في الصفحة
مفهوم الأطر
الإطار ( Frame ) هو مكان يتم حجزه في الصفحة ليتم فيه عرض محتوى موجود في صفحة أخرى.
بمعنى آخر الإطار يتيح لنا عرض محتوى صفحة HTML بداخل صفحة HTML أخرى.
في هذا الدرس سنتعرف على الوسم المخصص لإضافة أطر في الصفحة بالإضافة إلى الخصائص التي يمكن وضعها للأطر.
إضافة إطار في الصفحة
بشكل عام نستخدم الوسم <iframe>
على هذا النحو <iframe src="url"></iframe>
لعرض إطار في الصفحة.
مكان الكلمة url
نضع مسار الصفحة التي نريد عرضها بداخله.
في المثال التالي قمنا بإضافة إطار في الصفحة باستخدام الوسم <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/sMSUw6ApoRQ?si=TPZWhoxQ5fLLE_jo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe>