[HTML/CSS] تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الثامن ) . - الموقع العربي الاول للعبة Silkroad Online

**3ashek El7ozn** · 18-01-2015, 08:11 AM

الدرس الثامن فى لغة الـ HTML ...

أهلا وسهلا بكم اعضاء و زوار منتدى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,
سوف نتحدث فى درس اليوم عن الإطارات .. Frames وطريقة عرض صفحات الويب باستخدامها .

فى البداية دعونا نتعرف ما هى الإطارات سويا ,,
*-.-**-.-**-.-**-.-**-.-**-.-*
* هل سبق لك ان شاهدت صفحة ما على الإنترنت مقسمة الى عدة أقسام بحيث يظهر منها كل جزء بصفحة مستقلة وتظهر بصورة منفصلة عن الاقسام الاخرى وربما قد تقوم بالضغط على احدى الروابط الموجودة فى احد هذه الاقسام فيتم نقلك الى الصفحة المتعلقة بها فى القسم الآخر ! ؟ .
فى الحقيقة أن كل قسم منها هو عبارة عن ملف HTML كامل ومستقل بحد ذاته , وهي مجرد صفحات عادية لا تختلف عن الصفحات التى تعلمناها في عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,,
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
فتتكون الصفحة من عدد ملفات الصفحة نفسها بالاضافة الى صفحة الملف الأساسي الذي يجمعها .
*-.-**-.-**-.-**-.-**-.-**-.-*
دعونا نرى مثالاً لما قمت بتعريفه هنا ,,

*-.-**-.-**-.-**-.-**-.-**-.-*
كما نرى ان صفحتنا مقسمة إلى ثلاثة اقسام وكل قسم بلون مختلف وكل لون يعتبر إطار او Frame بملف خاص بعيداُ عن صفحتنا الأساسية ,,

<HTML> <HEAD> <TITLE>Frame Guide ~ S4A</TITLE> </HEAD> <FRAMESET COLS="30%,30%,40%"> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> <FRAME SRC="frame3.html"> <FRAMESET> </HTML>

وقبل ان نبدأ فى شرح درسنا اليوم عليك بتحضير بعض الأمثلة السابق شرحها من الدروس الماضية لنقوم بالعمل عليها ,,
ولناخد مثالنا من هذا الدرس ,, عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] وليكن هذا .

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#0066cc"> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML>

مع تغيير لون الخلفية ولون الخط المستخدم فى الشرح كما تريد ,, !
الدرس الخاص بالألوان مرة اخرى -:)
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]

فى المثال التوضيحى للإطارات الذى سبق عرضه قد استخدمت المثال الذى استخدمناه من عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] مع تغيير لون الخلفية والخط للتوضيح ,, كما اننى قمت بتسمية ملفات الإطارات بالأسماء التالية ,,
frame1.html - frame2.html - frame3.html
يمكنك تسمية هذه الملفات كما تشاء فانت لست مجبرا على هذه الاسم ,,
وبداخل كل ملف من هذه الملفات الكود الخاص به ,,
حيث ان frame1.html يحتوى على ,,

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#0066cc"> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML>

*-.-**-.-**-.-**-.-**-.-**-.-*
frame2.html يحتوى على ,,

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#990000"> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML>

*-.-**-.-**-.-**-.-**-.-**-.-*
frame3.html يحتوى على ,,

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#000000"> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML>

*-.-**-.-**-.-**-.-**-.-**-.-*
فليس هناك جديداً فى هذه الصفحات ,, فكلها امثلة سبق طرحها فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] من الدورة .
وكما ذكرنا سابقا ان ,,

الصفحة تتكون من عدد ملفات الصفحة نفسها بالاضافة الى صفحة الملف الأساسي الذي يجمعها ,,

فالأمثلة السابق ذكرها , frame1.html - frame2.html - frame3.html تعتبر هى الصفحات نفسها .
اما بالنسبة للملف الأساسى ,,

<HTML> <HEAD> <TITLE>Frame Guide ~ S4A</TITLE> </HEAD> <FRAMESET COLS="30%,30%,40%"> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> <FRAME SRC="frame3.html"> <FRAMESET> </HTML>

سوف تلاحظ بعض الوسوم الجديدة فى هذا الكود ,, بالإضافة الى اننا لم نقم باضافة الوسم <BODY>___</BODY> الى صفحتنا الرئيسية التى ستجمع هذه الصفحات الفرعية .
*-.-**-.-**-.-**-.-**-.-**-.-*
بالطبع نعم لم نستخدم الوسم <BODY>___</BODY> واستخدمنا بدلا منه الوسم <FRAMESET>___<‎/FRAMESET> فالملف الرئيسى لا يحتوى على الوسم <BODY>___</BODY> , حيث ان الوسم <FRAMESET>___<‎/FRAMESET> هو المسئول عن ضم كافة الإطارات او الملفات الفرعية .
اما بالنسبة للخاصية COLS فهى التى تحدد عدد وأحجام الإطارات العمودية للصفحة بطريقتين كما سبق ذكرهما فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ( الطريقة المباشرة - الطريقة النسبية ) او كلاهما معا .
والآن جاء دورك للعمل بنفسك ,, ^_^

اما الخاصية الثانية فهى ROWS وأعتقد أنك استنجت طبيعة عملها بنفسك فهى التى تحدد عدد وحجم الإطارات الأفقية الصفوف داخل الصفحة .
ومثالاً على ذلك يمكنك استخدام المثال السابق مع تغيير بسيط فى صفحتنا الرئيسية ,, وهى استبدال الخاصية COLS بالخاصية ROWS بالاحتفاظ بتنسيق الملف السابق ,,

<HTML> <HEAD> <TITLE>Frame Guide ~ S4A</TITLE> </HEAD> <FRAMESET ROWS="30%,30%,40%"> <FRAME SRC="frame1.html"> <FRAME SRC="frame2.html"> <FRAME SRC="frame3.html"> <FRAMESET> </HTML>

وستكون النتيجة بهذا الشكل ,,

كما يمكنك ايضا انشاء صفحة تحتوى على الخاصيتين COLS و ROWS معاً بدون اى مشكلة ,,
*-.-**-.-**-.-**-.-**-.-**-.-*
وهذا مثال عليها ,,

<HTML> <HEAD> <TITLE>Frame Guide ~ S4A</TITLE> </HEAD> <FRAMESET ROWS="100,*"> <FRAME SRC="frame1.html"> <FRAMESET COLS="200,*"> <FRAME SRC="frame2.html"> <FRAME SRC="frame3.html"> <FRAMESET> <FRAMESET> </HTML>

*-.-**-.-**-.-**-.-**-.-**-.-*

ويمكنك تغيير هذه القيم المستخدمة فى تحديد حجم الإطار باحدى الطريقتين كما سبق ذكره ( الطريقة النسبية - الطريقة المباشرة ) او بالطريقتين معاً .

والى هنا اكون قد انتهيت من الجزء الأول من درس الإطارات ,,

وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**

**Dev Ahmed** · 30-07-2015, 12:13 AM

شكرا علي المجهود الرائع .. في انتظار المزيد

يتصفح الموضوع حالياً : 1 (0 عضو و 1 زائر)