إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    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>
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

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