رسالة مصرية ثقافية
مرحبا بك أخي الزائر نشكر زيارتك ونتمني انضمامك للمنتدي
زيارتك تسر إدارة المنتدي ومشاركتكك تسعدنا وتساهم معنا بارتفاع الثقافة العامة
بعض المنتديات الفرعية والموضوعات
لا يمكنك الإطلاع عليها إلا بعد التسجيل كعضو في المنتدي
رسالة مصرية ثقافية
مرحبا بك أخي الزائر نشكر زيارتك ونتمني انضمامك للمنتدي
زيارتك تسر إدارة المنتدي ومشاركتكك تسعدنا وتساهم معنا بارتفاع الثقافة العامة
بعض المنتديات الفرعية والموضوعات
لا يمكنك الإطلاع عليها إلا بعد التسجيل كعضو في المنتدي
رسالة مصرية ثقافية
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

رسالة مصرية ثقافية

ثقافية - علمية - دينية - تربوية
 
الرئيسيةرسالة مصريةأحدث الصورالتسجيلدخول

رسالة مصرية ثقافية :: برامج الحاسب الآلي وتكنولوجيا المعلومات :: كتب وبرامج تعلمية
 

 مقدمة في HTML 3

اذهب الى الأسفل 
كاتب الموضوعرسالة
Eng. Ahmedzoubaa
Admin
Eng. Ahmedzoubaa


عدد المساهمات : 1216
تاريخ التسجيل : 28/08/2010
العمر : 50

مقدمة في HTML 3 Empty
مُساهمةموضوع: مقدمة في HTML 3    مقدمة في HTML 3 Emptyالخميس 18 نوفمبر 2010 - 8:26
الدرس السابع
الجداول (1)
<BLOCKQUOTE>
أهلاً وسهلاً بك إلى الدرس السابع من دروس HTML. هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات الويب.
تعد الجداول من أقوى الأدوات التي تتضمنها لغة HTML وأكاد أجزم بأنه لا يوجد موقع في الإنترنت إلا ويستخدمها بصورة أو بأخرى. والحقيقة أن وضع الجداول في صفحات الويب لا يقتصر على تلك القوائم من البيانات التي نحتاج لترتيبها في صفوف وأعمدة، بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها، والتحكم بمظهرها بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات.
إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من أدوات HTML لكنه قد يبدو لك مربكاً بعض الشيء وخاصة في البداية، وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف بها. لكن لا تقلق فكل شيء يبدو صعباً في بدايته ولكن سرعان ما يصبح سهلاً.

هل أنت مستعد؟ إذن هيّا بنا…


بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول


<TABLE>...<‎/TABLE>وسوم تعريف الجدول
<TR>...<‎/TR>
Table Row وسوم تعريف الصف في الجدول
<TD> Cell Data <‎/TD>
Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية
والآن لنتكلم بصورة أكثر دقة وتفصيلاً:

هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان

<TABLE> ... <‎/TABLE>
والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم

<TR> ... <‎/TR>
بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.
<TABLE>

<BLOCKQUOTE><TR>
<‎/TR>

<TR>
<‎/TR>

<TR>
<‎/TR>


</BLOCKQUOTE><‎/TABLE>
والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم

<TD> ... <‎/TD>
بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... <‎/TR> طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.
<TABLE>

<BLOCKQUOTE><TR>

<BLOCKQUOTE><TD> Data <‎/TD>
<TD> Data <‎/TD>
</BLOCKQUOTE><‎/TR>

<TR>

<BLOCKQUOTE><TD> Data <‎/TD>
<TD> Data <‎/TD>
</BLOCKQUOTE><‎/TR>

<TR>

<BLOCKQUOTE><TD> Data <‎/TD>
<TD> Data <‎/TD>
</BLOCKQUOTE><‎/TR>
</BLOCKQUOTE><‎/TABLE>
هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.

Data Data
Data Data
Data Data
هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:




  • مستوى الجدول ككل
  • مستوى الصفوف ككل أو كل واحد على حده
  • مستوى الخلايا ككل أو كل واحدة على حده.

ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.


نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <TABLE> ... <‎/TABLE> وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.


BORDER
تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود
‎<TABLE BORDER="5">‎
‎<TABLE BORDER="0">‎
WIDTH
نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح).
‎<TABLE WIDTH="600">‎
‎<TABLE WIDTH="80%">‎
HEIGHT
لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح
‎<TABLE HEIGHT="500">‎
‎<TABLE HEIGHT="100%">‎
CELLSPACING
لتحديد المسافة بين كل خلية من خلايا الجدول
‎<TABLE CELLSPACING="10">‎
CELLPADDING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.
‎<TABLE CELLPADDING="10">‎

ALIGN
لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left
‎<TABLE ALIGN="Left">‎
‎<TABLE ALIGN="Right">‎
BGCOLOR
ويستخدم لتحديد لون الخلفية للجدول
‎<TABLE BGCOLOR="#00FFFF">‎

هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:
‎<TABLE BORDER="5">‎


Data Data
Data Data
Data Data


‎<TABLE BORDER="5" CELLPADDING="5">‎

Data Data
Data Data
Data Data


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">‎

Data Data
Data Data
Data Data


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00">‎

Data Data
Data Data
Data Data


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300">‎

Data Data
Data Data
Data Data


‎<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"‎
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">‎

Data Data
Data Data
Data Data




ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <TR> ... <‎/TR> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:


ALIGN
لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center
VALIGN
لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline
BGCOLOR
لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.
ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:
‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR ALIGN="Left">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Right">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Center">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR VALIGN="Top">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Bottom">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Baseline">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


‎<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR>‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data Data
Data Data
Data Data


‎<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">‎
‎<TR BGCOLOR="#808080">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#C0C0C0">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR BGCOLOR="#FFFFFF">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>
</BLOCKQUOTE>
Data Data
Data Data
Data Data




<BLOCKQUOTE>
والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها في الدرس القادم إن شاء الله. أراك في الدرس التالي لنتابع الحديث عن موضوع الجداول.
</BLOCKQUOTE>
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://resalahmasriyah.mam9.com
Eng. Ahmedzoubaa
Admin
Eng. Ahmedzoubaa


عدد المساهمات : 1216
تاريخ التسجيل : 28/08/2010
العمر : 50

مقدمة في HTML 3 Empty
مُساهمةموضوع: رد: مقدمة في HTML 3    مقدمة في HTML 3 Emptyالخميس 18 نوفمبر 2010 - 8:26
الدرس الثامن
الجداول (2)
أهلاً وسهلاً بك إلى الدرس الثامن من دروس HTML. نتابع معاً في هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح، وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفنا، أي مع خصائص الخلايا.
هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم
... <‎/TD> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)

لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).







Data <‎/TD>
 Data <‎/TD>
<‎/TR>

Data <‎/TD>
 Data <‎/TD>
<‎/TR>

Data <‎/TD>
 Data <‎/TD>
<‎/TR>
<‎/TABLE>

أما الخصائص المستخدمة مع الخلايا، فهذا جدول بها:

ALIGN
تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right
VALIGN
تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline
WIDTH
تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف.
HEIGHT
تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه.
BGCOLOR
تحدد لون خلفية الخلية
COLSPAN
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً
‎		‎
حيث n هو عدد الخلايا التي سيتم دمجها
ROWSPAN
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها).
‎		‎
وبالطبع n هو عدد الخلايا التي سيتم دمجها

وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:


  • كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR. كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم .
  • الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT. يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).
    وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم . ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
    وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.
  • إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف، فلا يكفي أن تقوم بحذف وسوم الخلايا منها. (كما ترى في الشيفرة التاليةSmile








    • Data <‎/TD>

    <‎/TR>

    Data <‎/TD>
    		 Data <‎/TD>
    <‎/TR>

    Data <‎/TD>

    <‎/TR>
    <‎/TABLE>
    لأن هذا ما ستحصل عليه:


    Data
    Data Data
    Data
    لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.



    إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:
    ‎‎







    Data <‎/TD>

    <‎/TR>

    Data <‎/TD>
    		 Data <‎/TD>
    <‎/TR>

    Data <‎/TD>

    <‎/TR>
    <‎/TABLE>


    Data
    Data Data
    Data
    لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع.
    مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول
    ‎‎







    Data <‎/TD>
    		 Data <‎/TD>

    <‎/TR>

    Data <‎/TD>

    <‎/TR>

    Data <‎/TD>

    <‎/TR>
    <‎/TABLE>
    ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج.


    Data Data
    Data
    Data


    هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم
    		... <‎/TH> وهي اختصار Table Header أي ترويسة الجدول.
    والفرق الوحيد بينها وبين     		... <‎/TD> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص وبنفس التفاصيل التي ذكرت.

    الوسوم الأخيرة المستخدمة في الجداول هي
    ... <‎/CAPTION> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا. ‎
    ‎






    Table Caption <‎/CAPTION>

    Data <‎/TD>
    		 Data <‎/TD>
    <‎/TR>

    Data <‎/TD>
    		 Data <‎/TD>
    <‎/TR>

    Data <‎/TD>
    		 Data <‎/TD>
    <‎/TR>
    <‎/TABLE>


    Table Caption
    Data Data
    Data Data
    Data Data


    وأخيراً... وصلنا إلى نهاية هذه الدرس. وما بقي لدي هو أن أحثـك على تطبيق ما قمت بشرحه فيه وفي الدرس السابق وباقي الدروس، وتجربة جميع الاحتمالات الواردة للخصائص والقيم. ومن ناحيتي إليك هذه الصفحة التي تحتوي على عدة طرق وأمثلة تطبيقية لاستخدام الجداول. أو إذا كنت واثقاً من قوة فهمك للجداول قم بالنقر هنا للإنتقال مباشرة إلى الدرس التالي.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    https://resalahmasriyah.mam9.com
    Eng. Ahmedzoubaa
    Admin
    Eng. Ahmedzoubaa


    عدد المساهمات : 1216
    تاريخ التسجيل : 28/08/2010
    العمر : 50

    مقدمة في HTML 3 Empty
    مُساهمةموضوع: رد: مقدمة في HTML 3    مقدمة في HTML 3 Emptyالخميس 18 نوفمبر 2010 - 8:27
    الدرس التاسع
    الإطارات (1)
    أهلاً وسهلاً بك إلى الدرس التاسع من دروس HTML. في هذا الدرس والدرسين التاليين سوف نقوم بالتعرف على الإطارات Frames وطريقة عرض صفحات الويب باستخدامها…
    فهل تعرف ما هي الإطارات؟ حسنا، سأوضحها لك… هل سبق لك وأن زرت إحدى الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث يظهر في كل منها صفحة مستقلة، وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت بالنقر على إحدى الوصلات التشعبية الموجودة في أحد الأقسام لتظهر الصفحة المتعلقة بها في القسم الآخر.
    إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا قم بالنقر هنا لتشاهد مثالاً على صفحة ذات إطارات (ولا تنسى العودة لكي تتابع الدرس معا).
    كما شاهدت، فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف Html كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها في الدروس السابقة، ولا علاقة لكل منها بالصفحات الأخرى من حيث التركيب والتعريف.
    أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص بـِ:

    مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها.

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


    Frame1<‎/TITLE><br /><‎/HEAD><br /><BODY><br />Frame 1<br /><‎/BODY><br /><‎/HTML><br /></span></font><br /><br /><br />ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم <div align="center"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET> ... <‎/FRAMESET> </span></font></div><div align="right">بدلاً من الوسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY> ... <‎/BODY> </span></font></div><div align="center">((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">BODY</span></font> )) </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Master File<‎/TITLE><br /><‎/HEAD><br /> <br /><FRAMESET><br /><‎/FRAMESET><br /> <br /><‎/HTML><br /></span></font><br /><div align="right">نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">COLS</span></font> وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. </div><div align="right">والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية <u><strong>لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات </strong></u>حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً. </div><br /><br /><table dir=ltr cellPadding=5 width="80%" border=1><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_1.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="20%,50%,30%">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_2.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="200,300,*">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_3.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، <br />أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع) </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="200,*,15%,20%">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_4.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة. </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="150,*,2*">‎<br /><‎/FRAMESET><br /> <br /><a href="http://www.khayma.com/hpinarabic/examples/master_5.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*) </span></div></td></tr></table><div align="right">أما الخاصية الثانية فهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ROWS</span></font> وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة): </div><br /><br /><table width="80%" border=1><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="50%,50%">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_6.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="20%,50%,30%">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_7.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="50,120,*">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_8.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="50,*,15%,20%">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_9.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. </span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="*,2*">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/master_0.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal">يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول </span></div></td></tr></table><div align="right">لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET></span></font> فلا زال هناك الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> فما هو عمل هذا الوسم؟ </div><div align="right">حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY></span></font> دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎<IMG SRC="imagname.ext">‎</span></font> </div><div align="right">وفي حالة الإطارات فإننا نستخدم الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><IMG></span></font>. وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET>.</span></font> وسوف أقوم مباشرة باستخدام الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SRC</span></font> لتحديد مصدر الملف. </div><div align="right">دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /></span></font><br /><div align="center">الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.</div><div align="right">مثال آخر:</div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="200,400,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /></span></font><br /><div align="right">مثال ثالث:</div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="50,*,15%,20%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /></span></font><br /><div align="right">ورابع:</div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="*,2*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /></span></font><br /><br /><br /><div align="right">وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME SRC></span></font> تماماً كما ندرجها باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><IMG SRC></span></font> وإليك هذا المثال: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="thedome.jpg">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/mastimag.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /><br /><br /><div align="right">والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:- </div><br /><br /><table dir=rtl width="80%" bgColor=#ffffff border=5><tr><td><span style="font-size: 16px; line-height: normal"><br /><br /><br /><ul><br /><li>لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات.<br /></li><li>الملف الرئيسي هو ملف <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> إعتيادي غير أننا نكتب الوسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET> ...<‎/FRAMESET></span></font> بدلاً من <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY> ...</BODY>.</span></font> وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها.<br /></li><li>نستخدم الخصائص <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">COLS, ROWS</span></font> لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها.<br /></li><li>الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة.<br /></li><li>نستخدم الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SRC.</span></font> بالإضافة إلى استخدامه لتحديد باقي الخصائص .<br /></li></ul><br /></span></td></tr></table><div align="right">كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي: </div><br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/frameset.gif" style="width: 304;height: 254" border="0" alt="مقدمة في HTML 3 Frameset"/><br /><br /> <div align="right">هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... <br />حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية: </div><br /><br /><br /><ul><br /><li><div align="right">صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين <a href="http://www.khayma.com/hpinarabic/examples/master.html" class="postlink" target="_blank" rel="nofollow"> * </a> </div></li><li><div align="right">صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين <a href="http://www.khayma.com/hpinarabic/examples/masterc.html" class="postlink" target="_blank" rel="nofollow"> * </a> </div></li></ul><br /><div align="right">لنبدأ بالمثال الأول:<br />بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /> <br /></span></font><br /><div align="right">لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> وكأنه صفحة إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET></span></font> مرة أخرى. </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> <FRAMESET><br /> <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></span></font><br /><div align="right">وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET COLS="200,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></span></font><br /><div align="right">ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة <a href="http://www.khayma.com/hpinarabic/examples/framcode.html" class="postlink" target="_blank" rel="nofollow">فهذه هي</a> </div><br /><br /><div align="right">لنقم الآن بإدراج مثال آخر وتحليله: أنقر <a href="http://www.khayma.com/hpinarabic/examples/masterc2.html" class="postlink" target="_blank" rel="nofollow">هنا</a> لمشاهدته ثم عد إلى هنا لنناقشه معاً </div><div align="right">يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></span></font><br /><div align="right">العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة) </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /> <br /></span></font><br /><div align="right">وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> <br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></span></font><br /><div align="right">وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال. وهو ما سنكمله في الدرسين القادمين! أراك على خير في <a href="http://www.khayma.com/hpinarabic/htutor10.html" class="postlink" target="_blank" rel="nofollow">الدرس التالي.</a> </div></BLOCKQUOTE></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--259" style=""><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--260" id="p260" style=""><td class="row2" valign="top" width="150"><span class="name"><a name="260" style="position: relative; top: -30px; width: 1px;" id="260"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 3 Empty" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 3    <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 3 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:28</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div><strong><span style="font-size: 25px; line-height: normal"><font color="#ff0000">الدرس العاشر<br />الإطارات (2)</font></span></strong><br /><strong></strong> <br /><BLOCKQUOTE><div align="right">أهلاً وسهلاً بك إلى الدرس العاشر من دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML.</span></font> والذي لا زلنا نناقش موضوع الإطارات فيه. لقد تعرفت في الدرس السابق على الأساسيات في هذا الموضوع، وتعلمت كيفية إنشاء صفحة ويب باستخدام مبدأ الإطارات. ونتابع معاً التعرف على باقي الخصائص والتحديدات المتعلقة بها.</div><div align="right">بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET></span></font> والذي يوضع بدلاً من <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY></span></font> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما. </div><div align="right">وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها <a href="http://www.khayma.com/hpinarabic/htutor16.html" class="postlink" target="_blank" rel="nofollow">هنا</a>). فمثلاً لدينا أربع خصائص للوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET></span></font> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape, MS Explorer.</span></font> وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت. </div><div align="right">أولى هذه الخصائص هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">FRAMEBORDER</span></font> وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /><a href="http://www.khayma.com/hpinarabic/examples/masterfb.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /><br /><br />أما الخصائص الثلاث الأخرى فهي: <br /><ul><br /><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">BORDER: </span></font>تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. <font face="Arial"><span style="font-size: 9px; line-height: normal">(‎BORDER="n"‎)</span></font> وتعمل فقط مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape</span></font> <br /></div></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">BORDERCOLOR: </span></font>لإضافة لون للحدود <font face="Arial"><span style="font-size: 9px; line-height: normal">(‎BORDERCOLOR="rrggbb"‎)</span></font> وتعمل مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape</span></font> أيضاً. <br /></div></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">FRAMESPACING: </span></font>لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل <font face="Arial"><span style="font-size: 9px; line-height: normal">(FRAMESPACING="n"‎)</span></font> وهي تعمل مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MS Explorer.</span></font> </div></li></ul><br /><br /><br /><div align="right">أما الخصائص المستخدمة مع الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> فهي كالتالي: </div><br /><br /><br /><ul><br /><li><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MARGINHEIGHT: </span></font>تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل). <font face="Arial"><span style="font-size: 9px; line-height: normal">‎MARGINHEIGHT="n"‎</span></font><br /></li><li><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">MARGINWIDTH: </span></font>تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل). <font face="Arial"><span style="font-size: 9px; line-height: normal">‎MARGINWIDTH="n"‎</span></font><br /></li><li><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SCROLLING: </span></font>تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">yes</span></font> للظهور. <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">no</span></font> لعدم الظهور. و <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">auto</span></font> التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Windows</span></font> <font face="Arial"><span style="font-size: 9px; line-height: normal">SCROLLING="yes"‎<br />SCROLLING="no"‎<br />SCROLLING="auto"‎<br /></span></font><br /></li><li><div align="right"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NORESIZE</span></font> عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم. </div></li></ul><br /><div align="right">ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر <a href="http://www.khayma.com/hpinarabic/examples/mastimag.html" class="postlink" target="_blank" rel="nofollow">هنا.</a> وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NORESIZE</span></font> </div><br /><br /><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">‎<br />‎<FRAME SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://www.khayma.com/hpinarabic/examples/msmarghg.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /><br /><br /><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">‎<br />‎<FRAME SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://www.khayma.com/hpinarabic/examples/msmargwd.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /><br /><br /><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">‎<br />‎<FRAME SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://www.khayma.com/hpinarabic/examples/msscroll.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /><br /><br /><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<FRAMESET COLS="50%,50%">‎<br />‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>‎<br />‎<FRAME SRC="frame2.html">‎<br />‎</FRAMESET>‎<br /><a href="http://www.khayma.com/hpinarabic/examples/msnorsiz.html" class="postlink" target="_blank" rel="nofollow"> * </a> </span></font><br /><br /><br /><br /><br /> <div align="right">كذلك هناك الخصائص <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR</span></font> التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET>.</span></font> لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها. </div><div align="right">بقي لدينا الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً وبصورة مستقلة عن باقي الخصائص، وذلك في الدرس التالي إن شاء الله.</div><br /><br /><div align="right">هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو: </div><div align="center"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><NOFRAMES> ... <‎/NOFRAMES> </span></font></div><div align="right">يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">Netscape, MS Explorer)</span></font> لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات. </div><div align="right">فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم في نهاية الملف الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية. </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Main File<‎/TITLE><br /><‎/HEAD><br />‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /> <br /><NOFRAMES><br /><BODY><br /></span></font><br /><div align="center"><span style="font-size: 12px; line-height: normal">أكتب صفحتك<br />بالصورة<br />الإعتيادية هنا </span></div><font face="Arial"><span style="font-size: 9px; line-height: normal"><‎/BODY><br /><‎/NOFRAMES><br /> <br /><‎/HTML><br /></span></font><br /><div align="right">أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه الصدمة)!! </div><br /><br /><div align="right">وماذا بعد...؟ لم يبق أي شيء ليذكر في هذا الدرس فقد قمنا بمناقشة جميع خصائص الإطارات عدا الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME.</span></font> ما رأيك لو قمنا بالتدرب على إنشاء نسخة من هذا الموقع باستخدام الإطارات في الدرس التالي؟ فكر في هذا الموضوع وتخيّل تصميماً معيناً تحب أن تراه في هذا الموقع (أو بالأحرى تحب أن ترى الموقع فيه). وقم بتجهيز الملفات الخاصة بذلك لتقارنها مع الملفات والأمثلة التي سأوردها. أراك على خير في <a href="http://www.khayma.com/hpinarabic/htutor11.html" class="postlink" target="_blank" rel="nofollow">الدرس التالي</a> </div></BLOCKQUOTE></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--260" style=""><td class="row2 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr class="post post--261" id="p261" style=""><td class="row1" valign="top" width="150"><span class="name"><a name="261" style="position: relative; top: -30px; width: 1px;" id="261"></a><strong>Eng. Ahmedzoubaa</strong></span><br /><span class="postdetails poster-profile">Admin<br /><img loading="lazy" src="https://2img.net/u/3115/12/13/38/avatars/1-47.jpg" alt="Eng. Ahmedzoubaa" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#06067a;">عدد المساهمات</span> : </span> 1216<br /><span class="label"><span style="color:#06067a;">تاريخ التسجيل</span> : </span> 28/08/2010<br /><span class="label"><span style="color:#06067a;">العمر</span> : </span> 50<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="مقدمة في HTML 3 Empty" style="width:150px;height:1px" /></td><td class="row1" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img class="sprite-icon_post_target" src="https://2img.net/i/empty.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: مقدمة في HTML 3    <img src="https://2img.net/i/fa/empty.gif" alt="مقدمة في HTML 3 Empty" border="0" />الخميس 18 نوفمبر 2010 - 8:29</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr height="100%" valign="top"><td colspan="2"><div class="postbody"><div><strong><span style="font-size: 25px; line-height: normal"><font color="#ff0000">الدرس الحادي عشر<br />الإطارات (3)</font></span></strong><br /><strong></strong> <div align="right">أهلاً وسهلاً بك إلى الدرس الحادي عشر من دروس <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML.</span></font> كما ترى من العنوان لا زلنا نتابع في موضوع الإطارات، وفي القسم الثالث منه. وذلك لأهمية هذا الموضوع وتشابك خطوطه. وخصوصاً لأننا نحتاج إلى التعامل مع أكثر من وسم في نفس الوقت وداخل أكثر من ملف. مما يستدعي التركيز والتروي عندما نريد إنشاء صفحة إطارات. </div><div align="right">لقد أنهينا في الدرسين الماضيين شرح كافة الوسوم والخصائص التي تتعلق بالإطارات، عدا واحدة هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> ووعدتك أن أقوم بشرحها بصورة وافية في درس مستقل. كما وعدتك أن نقوم بإجمال موضوع الإطارات والتدرب عليها من خلال مثال واقعي يتمثل بإنشاء صفحة إطارات لهذا الموقع وهاأنا ذا أفي بوعدي. </div><div align="right">لقد قلت إن هذه الخاصية تعتبر من أهم خصائص الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> لأنها تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها. <strong>لنعتبر هذا تعريفاً مبدئياً.</strong> ولكي أوضح لك الهدف من هذه الخاصية، قم باستعراض المثال <a href="http://www.khayma.com/hpinarabic/examples/mainfile.html" class="postlink" target="_blank" rel="nofollow">التالي</a> ... الذي قمت فيه بتمثيل بعض الأجزاء من هذا الموقع (لنترك تلك الأمثلة المملة التي كنا نعمل عليها في هذا الدرسين السابقين ولنبدأ بالعمل الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة في الإطار الأيسر ......وبالطبع لا تنسى النقر على زر <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">BACK</span></font> الموجود في متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي تنقلت فيها في صفحات الإطار. <br /> <br />ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت ظنّك؟). حسناً، لا زالت هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن تتمعن في الشيفرات التالية، وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً من فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي. </div><br /><br /><div align="right">شيفرة الملف الرئيسي الذي أسميته <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">mainfile.html</span></font> </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Main File<‎/TITLE><br /><‎/HEAD><br />‎<FRAMESET ROWS="60,*">‎<br />‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br />‎<FRAMESET COLS="120,*">‎<br />‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br />‎<FRAME SRC="htmintro.html">‎<br /><‎/FRAMESET><br /><‎/FRAMESET><br /><‎/HTML><br /></span></font><br /><br /><br /><div align="right">شيفرة الملف العلوي (الترويسة) الذي أسميته <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><a href="http://www.khayma.com/hpinarabic/examples/header.html" class="postlink" target="_blank" rel="nofollow">header.html</a></span></font> </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Header File<‎/TITLE><br /><‎/HEAD><br />‎<BODY bgcolor="#BCD8EB">‎<br /><CENTER><IMG SRC="frambnr.jpg"><‎/CENTER><br /><‎/BODY><br /><‎/HTML><br /></span></font><br /><br /><br /><div align="right">شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية والذي أسميته <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><a href="http://www.khayma.com/hpinarabic/examples/lftframe.html" class="postlink" target="_blank" rel="nofollow">lftframe.html</a></span></font> </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Buttons<‎/TITLE><br /><‎/HEAD><br />‎<BODY BGCOLOR="#BCD8EB">‎<br />‎<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>‎<br />‎<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>‎<br />‎<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>‎<br />‎<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>‎<br />‎<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>‎<br /><‎/BODY><br /><‎/HTML><br /></span></font><br /><br /><br /><div align="right">وبالطبع بقي لدينا الإطار الأكبر وهو لا يحتوي على ملف خاص لأنه الإطار العام الذي نريد إظهار الملفات فيه. ولن يتم إجراء أي تعديل على تلك الملفات. وبصورة مبدئية لقد شاهدت أنه يحتوى على صفحة المقدمة والمسماه <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">htmintro.html</span></font> </div><br /><br /><div align="right">وهنا يأتي دور الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME</span></font> والتي نقوم من خلالها بتعيين اسم ما للإطار <strong>-أي الإطار الذي نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية-</strong> حيث سيتم فيما بعد استخدام هذا الإسم من أجل استهداف هذا الإطار من قبل الوصلات التشعبية في الإطارات الأخرى أو حتى في الصفحات الأخرى.<br />وبالمناسبة فقد حان الآن ذكر خاصية جديدة من خصائص الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><A> ... <‎/A></span></font> ( وهو وسم الوصلات التشعبية كما عرفت في <a href="http://www.khayma.com/hpinarabic/htutor06.html" class="postlink" target="_blank" rel="nofollow">الدرس السادس.</a>) وهذه الخاصية هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TARGET.</span></font> (انتظر قليلاً وستعرف لماذا) </div><div align="right">دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً وتسلسلاً:<br />برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">NAME?</span></font> سؤال سخيف! أليس كذلك؟ طالما أنها إحدى خصائص الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> إذن من البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي إذن هي توضع في الملف الرئيسي... هذه أصبحت واضحة‍! لكن مع أي وسم من وسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> الموجودة في الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر بالنسبة لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضاً. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام الذي ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">mainwindow.</span></font> وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _ الذي يستخدم في حالات خاصة سأذكرها لك لاحقاً في هذا الدرس). <br /> <br />إذن تصبح شيفرة الملف الأساسي هي: </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Main File<‎/TITLE><br /><‎/HEAD><br />‎<FRAMESET ROWS="60,*">‎<br />‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br />‎<FRAMESET COLS="120,*">‎<br />‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎<br />‎<FRAME SRC="htmintro.html" <strong>NAME="mainwindow"</strong>>‎<br /><‎/FRAMESET><br /><‎/FRAMESET><br /><‎/HTML><br /></span></font><br /><div align="right">وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار من أي مكان باستخدام الإسم الذي عرفناه به. </div><div align="right">المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. وهنا يأتي دور الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TARGET</span></font> سالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">lftframe.html.</span></font> أليس هو الملف الذي يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي: </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><HTML><br /><HEAD><br /><TITLE>Buttons<‎/TITLE><br /><‎/HEAD><br />‎<BODY BGCOLOR="#BCD8EB">‎<br />‎<A HREF="htutor01.html" <strong>TARGET="mainwindow"</strong>><IMG SRC="lesson1.jpg"></A><BR>‎<br />‎<A HREF="htutor02.html" <strong>TARGET="mainwindow"</strong>><IMG SRC="lesson2.jpg"></A><BR>‎<br />‎<A HREF="htutor03.html" <strong>TARGET="mainwindow"</strong>><IMG SRC="lesson3.jpg"></A><BR>‎<br />‎<A HREF="htutor04.html" <strong>TARGET="mainwindow"</strong>><IMG SRC="lesson4.jpg"></A><BR>‎<br />‎<A HREF="htutor05.html" <strong>TARGET="mainwindow"</strong>><IMG SRC="lesson5.jpg"></A><BR>‎<br /><‎/BODY><br /><‎/HTML><br /></span></font><br /><div align="right">والآن حان وقت العرض، أنقر <a href="http://www.khayma.com/hpinarabic/examples/mainfil2.html" class="postlink" target="_blank" rel="nofollow">هنا</a> لنشاهد صفحة الإطارات بعد التعديل: </div><div align="center"><font face="andalus,tahoma"><span style="font-size: 25px; line-height: normal">لقد نجحنا... أليس كذلك</span></font> </div><div align="right">الحقيقة أننا لم ننجح بصورة مطلقة، بل إلى حد ما... وأعتذر لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد الوصول إلى أفضل مستوى وأعلى أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك السبب الذي يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد أن قمت بإضافة وصلات تشعبية إضافية لها، واحدة خاصة بالإنتقال إلى ... صفحة الإطارات نفسها، أي إعادة تحميل الصفحة على الشاشة. والثانية للإنتقال من طريقة العرض بالإطارات إلى العرض بدون إطارات. لذلك أنقر <a href="http://www.khayma.com/hpinarabic/examples/mainfil3.html" class="postlink" target="_blank" rel="nofollow">هنا</a> رجاءً. وقم بتجربة النقر على هذه الوصلات الجديدة. </div><div align="right">مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة في ما بينها، وكذلك الأمر في الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:</div><font face="Arial"><span style="font-size: 9px; line-height: normal"><A HREF="filename.html" <strong>TARGET="mainwindow"</strong>> ... </A> </span></font><br /><div align="right">كما لا نستطيع كتابته بالشكل التالي: </div><font face="Arial"><span style="font-size: 9px; line-height: normal"><A HREF="filename.html"> ... </A> </span></font><br /><div align="right">وطبعاً أنت تعرف السبب في كلتا الحالتين. </div><div align="right">لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> نفسها من خلال وضع قيمة معينة للخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">TARGET</span></font> وهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">"‎_top"</span></font> لتخبر المتصفح أن يقوم بتحميل الصفحة في <strong>المستوى الأعلى</strong> من الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق في لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> وليست من عندي كما في الإسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">mainwindow.</span></font> </div><div align="right">والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎_top</span></font> معرفة بشكل مسبق في لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> لتحدد موقع ظهور الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">lowercase.</span></font> فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة: </div><br /><table cellPadding=10 width="80%" bgColor=#ffffff border=2><tr><td> <br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎_top</span></font><br /><br /><div align="right">تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلاً</div><br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/top.gif" style="width: 250;height: 150" border="0" alt="مقدمة في HTML 3 Top"/><br /><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎_blank</span></font><br /><br /><div align="right">تقوم بفتح شاشة جديدة وفارغة للمتصفح وتعرض الصفحة المحملة فيه</div><br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/blank.gif" style="width: 250;height: 150" border="0" alt="مقدمة في HTML 3 Blank"/><br /><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎_self</span></font><br /><br /><div align="right">(الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمة، أليس كذلك؟) </div><br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/self.gif" style="width: 250;height: 150" border="0" alt="مقدمة في HTML 3 Self"/> <br /><br /><br /><font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎_parent<br /></span></font><br /><br /><br />تقوم بعرض الإطار المحمل مكان الإطار الأب،<br />وتأمل الشكل التالي الذي يمثل صفحة إطارات مركبة. <br /><img src="https://2img.net/h/www.khayma.com/hpinarabic/images/parent.gif" style="width: 250;height: 150" border="0" alt="مقدمة في HTML 3 Parent"/><div align="right">أنت تعرف أننا نحتاج إلى ثلاثة أزواج من الوسوم <font face="Times New Roman"><span style="font-size: 12px; line-height: normal"><FRAMESET> ... <‎/FRAMESET></span></font> لإخراج مثل هذه الصفحة. </div><br /><ul><br /><li><div align="right">الأول لتحديد الصفحة ككل </div></li><li><div align="right">الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية </div></li><li><div align="right">الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3 </div></li></ul><div align="right">وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة <font face="Times New Roman"><span style="font-size: 12px; line-height: normal">‎_parent</span></font> لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة الرئيسية.<br />وللتمييز بين هذه القيمة والقيمة <font face="Times New Roman"><span style="font-size: 12px; line-height: normal">‎_top </span></font>فإن القيمة <font face="Times New Roman"><span style="font-size: 12px; line-height: normal">‎_top</span></font> تقوم بالتحميل في المستوى الأول (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية. </div><br /></td></tr></table><div align="right">ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف الوصلات التشعبية: </div><font face="Arial"><span style="font-size: 9px; line-height: normal">‎<A HREF="mainfile.html" <strong>TARGET="_top"</strong>><IMG SRC="mainpage.jpg"></A><BR>‎<br />‎<A HREF="htmintro.html" <strong>TARGET="_top"</strong>><IMG SRC="noframes.jpg"></A><BR>‎<br /></span></font><br /><div align="right">لحصلنا على النتيجة المرجوة. <a href="http://www.khayma.com/hpinarabic/examples/mainfil4.html" class="postlink" target="_blank" rel="nofollow">جرّب ذلك</a> وبذلك تستطيع أن تقول وبكل ثقة </div></div><div class="clear"></div></div><span class="gensmall"></span></td></tr><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></td></tr></table></td></tr><tr class="post--261" style=""><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/13/86/62/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://resalahmasriyah.mam9.com" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/13/86/62/i_icon_www.jpg" alt="https://resalahmasriyah.mam9.com" /></a> </td></tr></table></td></tr><tr align="right"><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="9%" class="noprint"> </td><td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">مقدمة في HTML 3 </div></td><td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="#top"><img src="https://2img.net/s/t/13/86/62/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> </td></tr></table></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;"><tr><td class="row2" valign="top" colspan="2" width="150"><span class="gensmall">صفحة <strong>1</strong> من اصل <strong>1</strong></span></td></tr><tr><td class="row2" colspan="2" align="right" valign="top"><span class="gensmall"></span></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><div class="cattitle"> مواضيع مماثلة</div></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt="+" align="middle" border="0" /></a></span></td></tr></table></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><div class="cattitle"> مواضيع مماثلة</div></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr><tr><td class="row2 postbody" valign="top">» <a style="text-decoration:none" href="/t192-topic" title="مقدمة في HTML">مقدمة في HTML</a><br />» <a style="text-decoration:none" href="/t193-topic" title="مقدمة في HTML 2">مقدمة في HTML 2</a><br />» <a style="text-decoration:none" href="/t195-topic" title="مقدمة في HTML 4">مقدمة في HTML 4</a><br />» <a style="text-decoration:none" href="/t186-topic" title="كتب تعليم تصميم المواقع - كتاب تعليم HTML-40">كتب تعليم تصميم المواقع - كتاب تعليم HTML-40</a><br />» <a style="text-decoration:none" href="/t196-topic" title="مقدمة إلى برنامج Paint Shop Pro">مقدمة إلى برنامج Paint Shop Pro</a><br /></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="row2" colspan="2" align="center" style="padding:0px"><a name="quickreply"></a><br /></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"><tbody><tr><td class="row2" valign="top" width="25%"><span class="gensmall"><strong>صلاحيات هذا المنتدى:</strong></span></td><td class="row1" valign="top" width="75%"><span class="gensmall"><strong>لاتستطيع</strong> الرد على المواضيع في هذا المنتدى<br /></span></td></tr><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/">رسالة مصرية ثقافية</a><a class="nav" href=""></a> :: <a href="/f20-montada" class="nav"><span>برامج الحاسب الآلي وتكنولوجيا المعلومات</span></a> :: <a href="/f22-montada" class="nav"><span>كتب وبرامج تعلمية</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img class="sprite-tabs_less" src="https://2img.net/i/empty.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"><tbody><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/">رسالة مصرية ثقافية</a><a class="nav" href=""></a> :: <a href="/f20-montada" class="nav"><span>برامج الحاسب الآلي وتكنولوجيا المعلومات</span></a> :: <a href="/f22-montada" class="nav"><span>كتب وبرامج تعلمية</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img class="sprite-tabs_more" src="https://2img.net/i/empty.gif" alt="+" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr></table><form action="/viewforum" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"><tr><td align="left" valign="middle" nowrap="nowrap" ><span class="nav"></span></td><td align="right" nowrap="nowrap"><span class="gensmall">انتقل الى: <select name="selected_id" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">اختر منتدى</option><option value="-1"></option><option value="-1">|</option><option txt="foro" value="c1">|--الفئة الأولى</option><option txt="foro" value="f1">|   |--المنتدى العام</option><option txt="foro" value="f35">|   |--إعلانات عامة</option><option txt="foro" value="f37">|   |--التواصل بين الإدارة والزوار</option><option value="-1">|   </option><option txt="foro" value="f6">|--ديني</option><option txt="foro" value="f17">|   |--كتب دينية</option><option txt="foro" value="f23">|   |--قرآن كريم</option><option txt="foro" value="f36">|   |--أدعية وأذكار</option><option txt="foro" value="f39">|   |--العقيدة الإسلامية</option><option txt="foro" value="f40">|   |--السيرة</option><option txt="foro" value="f45">|   |   |--هدي النبي صليى الله عليه وسلم وشمائله المحمدية</option><option txt="foro" value="f46">|   |   |--فقه السيرة النبوية</option><option value="-1">|   |   </option><option txt="foro" value="f43">|   |--تفسير القرآن الكريم</option><option txt="foro" value="f42">|   |--الفقه الإسلامي</option><option txt="foro" value="f41">|   |--التربية الإسلامية</option><option txt="foro" value="f44">|   |--موضوعات إسلامية</option><option value="-1">|   </option><option txt="foro" value="f4">|--المنتدي الثقافي</option><option txt="foro" value="f14">|   |--كتب متنوعة</option><option txt="foro" value="f18">|   |--مقالات وأدبيات</option><option txt="foro" value="f9">|   |--عالم المرأة والأسرة</option><option txt="foro" value="f29">|   |   |--أزياء وموضة</option><option txt="foro" value="f30">|   |   |--عالم المطبخ</option><option value="-1">|   |   </option><option txt="foro" value="f24">|   |--عالم الطفل</option><option txt="foro" value="f27">|   |--أبـــــــــــــــراج</option><option txt="foro" value="f38">|   |--ملف خاص بصور الثورة المصرية</option><option value="-1">|   </option><option txt="foro" value="f8">|--قسم العلوم التربوية والأدبية</option><option txt="foro" value="f5">|   |--التاريخ العربي</option><option txt="foro" value="f31">|   |   |--كتاب تاريخ العالم</option><option txt="foro" value="f32">|   |   |--كتاب تاريخ مختصر العالم الإسلامي</option><option value="-1">|   |   </option><option txt="foro" value="f25">|   |--شخصيات تاريخية</option><option txt="foro" value="f7">|   |--قسم علوم التربية</option><option txt="foro" value="f19">|   |--تعليم لغات</option><option value="-1">|   </option><option txt="foro" value="f3">|--علم الزراعة والإنتاج الزراعي</option><option txt="foro" value="f10">|   |--مكافحة الآفات</option><option txt="foro" value="f11">|   |--تنسيق حدائق وشبكات ري</option><option txt="foro" value="f12">|   |--بساتين ( خضر - محاصيل - فاكهة)</option><option txt="foro" value="f26">|   |   |--البرامج الزمنية للعمليات الزراعية في المحاصيل المختلفة</option><option value="-1">|   |   </option><option txt="foro" value="f33">|   |--أمراض نبات</option><option txt="foro" value="f28">|   |--النباتات والأعشاب الطبية</option><option txt="foro" value="f13">|   |--إنتاج حيواني وتربية</option><option txt="foro" value="f15">|   |   |--إنتاج حيواني</option><option txt="foro" value="f16">|   |   |--إنتاج داجني</option><option value="-1">|   |   </option><option txt="foro" value="f34">|   |--الصناعات الغذائية والألبان</option><option value="-1">|   </option><option txt="foro" value="f20">|--برامج الحاسب الآلي وتكنولوجيا المعلومات</option><option txt="foro" value="f21">    |--برامج الحاسب الآلي</option><option txt="foro" value="f22">    |--كتب وبرامج تعلمية</option></select><input type="hidden" name="tid" value="7476f558980ce013e9800998ecf8427e" /> <input class="liteoption" type="submit" value="انتقل الى" /></span></td></tr></table></form><div id="g24c656cc" style="clear:both;"><div align="center"><div></div></div></div><div style="height:3px"></div></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div><!-- close div id="page-body" --><div id="page-footer"><div align="center"><div class="gen"><span class="gensmall">©</span><a href="https://www.ahlamontada.com/phpbb" target="_blank">phpBB</a> | <strong><a href="https://www.ahlamontada.com/a-free-forum" target="_blank">منتدى مجاني</a></strong> | <a name="bottom" href="https://help.ahlamontada.com/" target="_blank">منتدى مجاني للدعم و المساعدة</a> | <a href="/abuse?page=%2Ft194-topic&report=1" rel="nofollow">التبليغ عن محتوى مخالف</a> | <a href="javascript:window.Sddan.cmp.displayUI();">ملفات تعريف الارتباط التابعة لجهات خارجية</a> | <strong><a href="/latest" target="_blank">آخر المواضيع</a></strong></div></div></div></td></tr></table><script type="text/javascript">$(document).ready( function() {$('div.ti-connect').attr({'data-loc' : 'https://connect.topicit.net/','data-login' : 'https://resalahmasriyah.mam9.com/topicit/index.php/connect','data-version' : '1','data-lang' : 'ar'});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { key: '74bad24252620514d1244cfba01f2ee2' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <script async src="https://ac.audiencerun.com/j/tag.js" data-arun-z="327yqx5vf9" data-arun-a="1" data-arun-cb="%%CACHEBUSTER%%" data-arun-vu="%%VIEW_URL_UNESC%%" data-arun-pm="%%PREVIEW_MODE%%" data-arun-site="%%SITE%%" data-arun-url="%%PATTERN:url%%" > </script></body></html>