HTML / الأطر
مفهوم الأطر
الإطار (Frame) هو مكان يتم حجزه في الصفحة ليتم فيه عرض محتوى موجود في صفحة أخرى. بمعنى آخر، الإطار يتيح لنا عرض محتوى صفحة HTML بداخل صفحة HTML أخرى.
في هذا الدرس، سنتعرف على الوسم المخصص لإضافة أطر في الصفحة بالإضافة إلى الخصائص التي يمكن وضعها للأطر.
إضافة إطار في الصفحة
بشكل عام نستخدم الوسم <iframe> على هذا النحو <iframe src="url"></iframe> لعرض إطار في الصفحة. مكان الكلمة url نضع مسار الصفحة التي نريد عرضها بداخله.
في المثال التالي قمنا بإضافة إطار في الصفحة باستخدام الوسم <iframe> و فيه قمنا بعرض الصفحة الرئيسية في موقع هرمش:
<!DOCTYPE html>
<html>
<body>
<!-- لإعلام المتصفح أننا سنعرض إطار في الصفحة <iframe> قمنا بوضع الوسم
src بداخل الإطار قمنا بتمرير مسار الصفحة التي نريد عرضها بداخله للخاصية -->
<iframe src="https://codafox.blogspot.com"></iframe>
</body>
</html>
تحديد حجم الإطار
الإطار الذي تعرضه في الصفحة يتم عرضه في مساحة صغيرة جداً فيها ما لم تحدد الحجم بنفسك كما رأيت في المثال السابق.
في العادة حجم الإطار نقوم بتحديده بواسطة كود CSS لأنها توفر طرق سهلة و أفضل لذلك، لكننا سنركز على الخصائص التي توفرها لنا لغة HTML لتحديد حجم الإطار:
width: نستخدمها لتحديد عرض الإطار الذي سيتم عرضه بالبكسل.height: نستخدمها لتحديد طول الإطار الذي سيتم عرضه بالبكسل.
العرض يمكنك تحديده بنسبة مئوية، فمثلاً يمكنك جعل عرض الإطار 100% حتى يساوي عرض كامل الصفحة. الطول في حال وضعته 100% لن تلاحظ أي فرق، والسبب هو أنك بحاجة لجعل طول الصفحة الأساسي 100% حتى يعمل.
في المثال التالي قمنا بعرض إطار في الصفحة مع تحديد أن عرضه 400 بكسل و طوله 400 بكسل:
<!DOCTYPE html>
<html>
<body>
<!-- هنا قمنا بعرض إطار مع تحديد أن عرضه 400 بيكسل و
HTML طوله 400 بيكسل و فيه سيتم عرض الصفحة الأولى في دورة -->
<iframe src="https://codafox.blogspot.com/search/label/HTML" width="400" height="400"></iframe>
</body>
</html>
في المثال التالي قمنا بعرض إطار في الصفحة مع تحديد أن عرضه 100% و طوله 400 بكسل:
<!DOCTYPE html>
<html>
<body>
<!-- هنا قمنا بعرض إطار مع تحديد أن عرضه 100% حتى يساوي عرض الصفحة
HTML و طوله 400 بيكسل و فيه سيتم عرض الصفحة الأولى في دورة -->
<iframe src="https://codafox.blogspot.com/search/label/HTML" width="100%" height="400"></iframe>
</body>
</html>
إضافة عنوان للإطار
العنوان الذي نضعه للإطار ليس الهدف منه أن يتم عرضه في الصفحة، أي لا يتم عرضه في الصفحة أمام المستخدم. أهمية العنوان الذي نضعه للإطار هو أنه في حال كان المستخدم كفيف و يعتمد على قارئ الشاشة (Screen Reader) حتى يقرأ له محتوى الصفحة، فإن القارئ سيقرأ العنوان الموضوع في الإطار و هكذا سيعلم المستخدم أنه يوجد إطار في الصفحة.
لوضع عنوان للإطار، قم بإضافة الخاصية title للوسم <iframe> و تمرير العنوان لها كقيمة على هذا النحو <iframe title="text">.
في المثال التالي قمنا بوضع عنوان للإطار الذي أضفناه في الصفحة مع تحديد حجم الإطار و رابط الصفحة التي سيتم عرض محتواها فيه:
<!DOCTYPE html>
<html>
<body>
<!-- لإعلام المتصفح أننا سنعرض إطار في الصفحة مع تحديد حجمه و الصفحة التي سيتم عرض محتواها فيه <iframe> قمنا بوضع الوسم
لا يظهر أمام المستخدم بل يتم سماعه في حال كان المستخدم يستخدم قارئ للصفحة فقط title النص الموضوع في الخاصية -->
<iframe src="https://codafox.blogspot.com/search/label/HTML" width="100%" height="400" title="First lesson in the HTML tutorial"></iframe>
</body>
</html>
فتح رابط بداخل إطار
في حال أردت فتح الرابط الموضوع في الصفحة بداخل إطار موضوع في نفس الصفحة، يمكنك إضافة الخاصية name للإطار و تمرير إسم خاص بها. بعدها تقوم بتمرير الإسم الذي وضعته نفسه للخاصية target في الرابط.
في المثال التالي قمنا بوضع رابط عند النقر عليه يتم فتح الصفحة التي يشير لها بداخل إطار موضوع في الصفحة:
<!DOCTYPE html>
<html>
<body>
<!-- "my_iframe" عند النقر على هذا الرابط سيتم فتح الصفحة التي يشير لها بداخل الإطار الذي قمنا بتسميته -->
<p><a href="https://codafox.blogspot.com/search/label/HTML" target="my_iframe">Open HTML Tutorial</a></p>
<!-- و تحديد حجمه "my_iframe" هنا قمنا بتعريف إطار مع تسميته -->
<iframe width="100%" height="400" name="my_iframe"></iframe>
</body>
</html>
عرض فيديو من يوتيوب في الصفحة
أي فيديو تجده في يوتيوب يمكنك عرضه بكل سهولة بداخل الصفحة بدون الحاجة لكتابة أي كود بنفسك حيث أن يوتيوب يوفر لك خيار إسمه تضمين (Embed) بمجرد النقر عليه يعطيك كود إطار يعرض الفيديو.
لتجد خيار التضمين (Embed)، أنقر على زر المشاركة (Share) الذي تجده تحت الفيديو و سيظهر لك. بعدها أنقر عليه حتى يعطيك الكود الذي يمكنك نسخه و وضعه في الصفحة.
في المثال التالي قمنا بوضع كود حصلنا عليه بعد النقر على زر التضمين (Embed) لفيديو موجود في يوتيوب:
<!DOCTYPE html>
<html>
<body>
<!-- هنا قمنا بعرض فيديو موجود في يوتيوب بداخل إطار
ملاحظة: هذا الكود حصلنا عليها جاهزاً من يوتيوب نفسه -->
<iframe
width="560"
height="315"
src="https://www.youtube.com"
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>
</body>
</html>