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

http://im61.gulfup.com/GBda5Q.png
الدرس الثامن فى لغة الـ HTML ...
http://im55.gulfup.com/QxQsXY.gif
أهلا وسهلا بكم اعضاء و زوار منتدى Silkroad4arab ,,
سوف نتحدث فى درس اليوم عن الإطارات .. Frames وطريقة عرض صفحات الويب باستخدامها .
http://im55.gulfup.com/QxQsXY.gif
فى البداية دعونا نتعرف ما هى الإطارات سويا ,,
*-.-**-.-**-.-**-.-**-.-**-.-*
* هل سبق لك ان شاهدت صفحة ما على الإنترنت مقسمة الى عدة أقسام بحيث يظهر منها كل جزء بصفحة مستقلة وتظهر بصورة منفصلة عن الاقسام الاخرى وربما قد تقوم بالضغط على احدى الروابط الموجودة فى احد هذه الاقسام فيتم نقلك الى الصفحة المتعلقة بها فى القسم الآخر ! ؟ .
فى الحقيقة أن كل قسم منها هو عبارة عن ملف HTML كامل ومستقل بحد ذاته , وهي مجرد صفحات عادية لا تختلف عن الصفحات التى تعلمناها في الدروس السابقة ,,
أرشيف دورة احتراف لغة الـ HTML من الالف الى الياء
فتتكون الصفحة من عدد ملفات الصفحة نفسها بالاضافة الى صفحة الملف الأساسي الذي يجمعها .
*-.-**-.-**-.-**-.-**-.-**-.-*
دعونا نرى مثالاً لما قمت بتعريفه هنا ,,
http://im56.gulfup.com/jnBoAp.png

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

كود بلغة 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>

http://im55.gulfup.com/QxQsXY.gif
وقبل ان نبدأ فى شرح درسنا اليوم عليك بتحضير بعض الأمثلة السابق شرحها من الدروس الماضية لنقوم بالعمل عليها ,,
ولناخد مثالنا من هذا الدرس ,, تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الخامس ) . وليكن هذا .

كود بلغة HTML:

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

مع تغيير لون الخلفية ولون الخط المستخدم فى الشرح كما تريد ,, !
الدرس الخاص بالألوان مرة اخرى -:)
تعلم HTML : دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الثانى ) .
http://im55.gulfup.com/QxQsXY.gif
فى المثال التوضيحى للإطارات الذى سبق عرضه قد استخدمت المثال الذى استخدمناه من الدروس السابقة مع تغيير لون الخلفية والخط للتوضيح ,, كما اننى قمت بتسمية ملفات الإطارات بالأسماء التالية ,,
frame1.html - frame2.html - frame3.html
يمكنك تسمية هذه الملفات كما تشاء فانت لست مجبرا على هذه الاسم ,,
وبداخل كل ملف من هذه الملفات الكود الخاص به ,,
حيث ان frame1.html يحتوى على ,,

كود بلغة 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:

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

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

كود بلغة 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:

<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 فهى التى تحدد عدد وأحجام الإطارات العمودية للصفحة بطريقتين كما سبق ذكرهما فى الدروس السابقة ( الطريقة المباشرة - الطريقة النسبية ) او كلاهما معا .
والآن جاء دورك للعمل بنفسك ,, ^_^
http://im55.gulfup.com/QxQsXY.gif
اما الخاصية الثانية فهى ROWS وأعتقد أنك استنجت طبيعة عملها بنفسك فهى التى تحدد عدد وحجم الإطارات الأفقية الصفوف داخل الصفحة .
ومثالاً على ذلك يمكنك استخدام المثال السابق مع تغيير بسيط فى صفحتنا الرئيسية ,, وهى استبدال الخاصية COLS بالخاصية ROWS بالاحتفاظ بتنسيق الملف السابق ,,

كود بلغة HTML:

<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>

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

http://im51.gulfup.com/fLc5BI.png
http://im55.gulfup.com/QxQsXY.gif
كما يمكنك ايضا انشاء صفحة تحتوى على الخاصيتين COLS و ROWS معاً بدون اى مشكلة ,,
*-.-**-.-**-.-**-.-**-.-**-.-*
وهذا مثال عليها ,,

كود بلغة HTML:

<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>

*-.-**-.-**-.-**-.-**-.-**-.-*
http://im79.gulfup.com/m8KQTK.png

ويمكنك تغيير هذه القيم المستخدمة فى تحديد حجم الإطار باحدى الطريقتين كما سبق ذكره ( الطريقة النسبية - الطريقة المباشرة ) او بالطريقتين معاً .
http://im55.gulfup.com/QxQsXY.gif
والى هنا اكون قد انتهيت من الجزء الأول من درس الإطارات ,,
http://im55.gulfup.com/QxQsXY.gif
وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**
http://im54.gulfup.com/Zz30Un.png