بسم الله الرحمن الرحيم
لدينا اليوم درس خفيف جدا
وهي الاطارات المدمجه
وهو تضمين موقع اخر او ملف اخر علي موقعك بداخل صفحتك
ما رايك ان تقوم بتجربة هذا ؟
يمكننا ايضا ازالة الحدود اي الخط الذي يحد الاطار ولكنها غير مدعومة في html5
هيا بنا نتعلم ما هي السمات التي يمكن استخدامها مع الاطارات
width : وهو كما نعلم عرض الاطار يمكن التحكم بالعرض من خلالة
height : وهو طول الاطار نتحكم بطول الاطار من خلالة
scrolling : وهو شريط التمرير يمكن تفعيلة او اغلاقة عن طريق القيم yes و no وللاسف غير مدعومة في html5
src : رابط الصفحة التي ستكون بداخل الاطار
name : وهو تسمية الاطار وسنقوم باستخدام الاسم بعد قليل
seamless : وهي بدون قيم تجعل الاطار كانه جزء من الصفحة
وهي غير مدعومة في بعض المتصفحات
srcdoc : وهي تمنحك القدرة علي كتابة اكواد html تعرض في حال ان الاطار لا يحتوي علي رابط
لكنها غير مدعومة من قبل بعض المتصفحات
sandbox : وهي التحكم بالاطار او الفريم ووضع قيود عيلة
ولها ده قيم
“” ترك القيمة فارغه يعني تطبيق كل القيود
allow-same-origin مسموح الحفاظ علي اصل الاطار
allow-scripts مسموح بجافا سكربت
allow-forms مسموح بالنماذج
allow-top-navigation يسمح للاطار بالتحميل والخروج في نفس الصفحة واخذ مكان الوثيقة الاصلية
واليك توافق هذة السمة
ناتي الان لاجمل جزء في هذا الدرس
قم بتنفيذ هذا الكود
ما هذا انه اطار فارغ !!
لا تقلق ما رايك ان ننشئ روابط وعند الضغط علي الرابط يفتح في الاطار ؟
هل يمكن هذا ؟ نعم يمكن لكن لاحظ بالكود السابق وضعنا name وهو iframe_a
جرب ان تضع الرابط التالي باي موضع بالوثيقة
هل لاحظت target ? نعم انها تحتوي علي نفس اسم الاطار ^_^
نعم وهذا يعني ان الرابط سوف يفتح في الاطار
لنجربة بشكل اكبر تفضل هذا الكود
[code]<a href="http://wp.me/p1wPdI-9d" target="iframe_a">facebook</a> —
<a href="https://omarfathy.wordpress.com" target="iframe_a">html</a> —
<a href="http://php.net" target="iframe_a">php</a>
<br><br>
<ifra2me src="" name="iframe_a" width="800"
height="350" scrolling="no" seamless>
</ifra2me>
احذف رقم 2 من داخل الوسم iframe
[/code]
ما رابك اليس الامر رائع
الي هنا ننتهي والي اللقاء في درسنا القادم
